移动端适配利器——rem

1. rem

rem(font size of the root element):根据网页的根元素来设置字体大小。
em(font size of the element):根据其父元素的字体大小来设置。

大部分游览器IE9+,如果不修改相关的字体配置,默认font-size: 16px;。如果我们想给一个P标签设置12px的字体大小,那么:

1
2
3
p {
font-size: 0.75rem;// 12px*1rem/16px=0.75rem
}

2. 屏幕适配

一般移动端适配的方法,大值可以分为:

  1. 简单一点的页面,一般高度直接设置成固定值,宽度一般撑满整个屏幕
  2. 稍复杂一点的是利用百分比设置元素的大小来适配,或者利用flex等css去设置一些需要定制的宽度
  3. 再复杂一些的响应式页面,需要利用css3的media query属性来进行适配,即根据屏幕的大小来设置对应的css样式

2.1 rem适配

给html设置不同的文字大小来达到我们css样式中的适配效果。

2.2 rem的数值计算

需要100px尺寸的时候,就是$\frac{16px}{1rem} \quad = \quad {100px\over ?rem}$,即100px * 1rem / 16px = 6.25rem

如果不使用css预编译工,每次使用rem代替px的时候我们都需要计算一遍,非常的繁琐。

2.3 使用sass的工程

使用sass的高级功能,我们可以这样写:

1
2
3
4
5
@function px2rem($px) {
//这个$rem是页面的基准值,和html的font-size有关,具体看下面2.4
$rem: 37.5px;
@return ($px / $rem) * 1rem;
}

具体使用:

1
height: px2rem(100px);

2.4 rem基准值计算

rem基准值的计算:

1
var rem = window.innerWidth / 10;

  1. 我们写样式的时候必须要先以一个确定的屏幕来作为参考,这个就由我们拿到的视觉稿来定,假定宽度是375px
  2. 而10这个数字是随便定义的,只是不想让html的font-size太大。当然也可以不设置,只要后面动态计算时保证一样的值就可以了

2.5 动态设置html的font-size

  1. 利用css的media query来设置即

    1
    2
    3
    4
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2) {
    html{font-size: 37.5px;}
    }
    /**根据不同的设备需要写多次,上面这句代码只是把[375px, 667px]尺寸下的html的字体大小改为37.5px,其他设备还需要再写**/
  2. 利用js动态设置

    1
    2
    //只需写一次
    document.getElementByTagName("html")[0].style.fontSize = window.innerWidth / 10 + "px";

3. 具体实践

  1. 设计稿

    1. 假设设计稿宽度为640px
    2. 我们人为的分为20份
      1. 640px / 20 = 32px
      2. 把32作为设计稿中rem的单位,即1rem=32px
    3. 样式的rem = 设计中的像素尺寸/32rem
      1. 比如设计稿上的width: 120px;,那么我写的样式(不管是再哪个移动设备上)就是width: 120/32rem;
        1
        2
        3
        4
        @function px2rem($px) {
        $rem: 32px;
        @return ($px / $rem) * 1rem;
        }
  2. 需要适配的设备宽度

    1. 假如是iphone5 即320px
    2. 那么当前设备的html的font-size=320/20px
  3. 其他设备以此类推并动态设置html的font-size
    1. document.getElementByTagName("html")[0].style.fontSize = window.innerWidth / 20 + "px";