移动端适配rem与em

前言

在移动端页面开发过程中避免不了对页面做适配，适配方案说多还是挺多的，接下来主要讨论一下rem和em。

兼容性

ios：6.1系统以上都支持

android：2.1系统以上都支持

大部分主流浏览器都支持，可以安心的使用~

一、rem

rem是基于页面根元素html字体大小来设置，例如给html元素设置font-size: 30px; p元素的font-size: 0.5rem;

可以使用geComputedStyle获取对应元素的font-size值 ;

由上可验证rem是基于html来设置的。

同时rem不仅使用与设置font-size，padding、margin、width、height等值也可以使用。

 二、em 

rem是基于页面父级元素字体大小来设置，还是同一个例子;

 

使用em，p元素的font-size为20px; 同样em可以使用到padding、margin、width、height上，但是需要注意的是如果当前元素设置的有font-size值，则padding、margin、width、height会根据自己的font-size来计算。可以理解成em是从父级继承，如果自己又就不会去父级那里取。

下面来谈谈rem与em的基准值设置~

三、rem em数值计算与基准值设置

数值：rem = 目标px值 / 根元素px值;   em = 目标px值 / 父元素（自己有font-size则是自己的font-size值）px值;

问题来了，基准值设置成多少合适？

一般拿到的设计稿是375px(2倍稿)*2的，也就是iphone6的大小。那么对于iphone6来说，基准值可以设置为37.5px。即设备宽度/10。这里做了一个除以10的计算，是因为不希望font-size值太大。这样使用rem时值也不会太大了。

如果是iphone5，基准值就是32px。

问题又来了，如何根据设备尺寸来设置基准值？

有两个方法，通过css media query 和js添加基准值：

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}

用media query难以覆盖到所有设备 

         /* iphone 6 */
         @media (min-device-width: 375px) and (max-device-width: 413px) {
            html {
                font-size: 37.5px;
            }
        }

        /* iphone 6 p*/
        @media (min-device-width: 414px) and (min-device-width: 767px){
            html {
                font-size: 41.4px;
            }
        }

        /* ipad*/
        @media (min-device-width: 768px) and (min-device-width: 1025px) {
            html {
                font-size: 76.8px;
            }
        }

而通过js来设置，可以实现覆盖所有设备：

js来设置：

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

 

总结

rem适配相对来说比较简单，因为只是相对于根元素来设置，同时有一个优点就是可以根据用户浏览器字号设置进行很好的调整；

em就比较繁琐，如果嵌套的层级比较多计算就比较复杂；

rem也不是使用于所有的场景，比如当用作图片或者一些不能缩放的展示时，必须要使用固定的px值，因为缩放可能会导致图片压缩变形等。