关于rem单位的理解和应用

Posted panjingshuang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于rem单位的理解和应用相关的知识,希望对你有一定的参考价值。

理解:

  • 是相对于html中font-size字体大小的单位
  • 比如font-size的大小为15px ,那么1rem = 15px

应用:

  • 主要是被应用到对不同分辨率的屏幕的适配上,即不同大小的屏幕上显示合适大小的字体和宽高度等

  那么,应该如何适配不同分辨率的手机呢?

  适配方式:

    • 媒体查询
      •  媒体查询+rem
      • @media screen and (min-width: 360px) {html{font-size:19.2px;}}
        @media screen and (min-width: 375px) {html{font-size:20px;}}
        @media screen and (min-width: 400px) {html{font-size:21.33333px;}}
        @media screen and (min-width: 414px) {html{font-size:22.08px;}}
        @media screen and (min-width: 440px) {html{font-size:23.46666px;}}
        @media screen and (min-width: 480px) {html{font-size:25.6px;}}
        @media screen and (min-width: 520px) {html{font-size:27.73333px;}}
        @media screen and (min-width: 560px) {html{font-size:29.86666px;}}
        @media screen and (min-width: 600px) {html{font-size:32px;}}
        @media screen and (min-width: 640px) {html{font-size:34.13333px;}}
        @media screen and (min-width: 680px) {html{font-size:36.26666px;}}
        @media screen and (min-width: 720px) {html{font-size:38.4px;}}
        @media screen and (min-width: 750px) {html{font-size:40px;}}
        @media screen and (min-width: 760px) {html{font-size:40px;}}
        @media screen and (min-width: 800px) {html{font-size:40px;}}
        @media screen and (min-width: 960px) {html{font-size:40px;}}
    • 利用js来动态的修改html中的font-size的大小 + rem
      • //视口设置
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
        
        var deviceWidth = document.documentElement.clientWidth;
        if(deviceWidth > 640) deviceWidth = 640;
        document.documentElement.style.fontSize = deviceWidth / 6.4 + ‘px‘;
      • 对于分辨率大于640px的屏幕,设备屏幕以640px来算; 6.4表示的是 我们假设以640px的屏幕作为基准,font-size的大小为100px ,那么 屏幕的整个宽度就是6.4rem (640px/100px = 6.4rem); 那么不同的屏幕下的font-size以6.4为基准来计算得出
    • 淘宝js实现font-size+rem
      • var scale = 1 / devicePixelRatio;
        document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);
        
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px‘
      • 主要是将屏幕的大小分成了10份,font-size就是屏幕大小的十分之一。

  https://blog.csdn.net/qq_34020571/article/details/78923089

以上是关于关于rem单位的理解和应用的主要内容,如果未能解决你的问题,请参考以下文章

less预处理的好处,补充关于之前发表的rem单位的运用于计算

rem布局和vw布局的理解

关于 rem 作为单位设置大小

关于Web移动端rem单位的那些坑

移动端应用rem定义相对长度单位

关于rem和em的理解