移动端适配rem与em

川长思鸟来 2022-02-19 00:05 385阅读 0赞

**前言**

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

**兼容性**

ios：6.1系统以上都支持

android：2.1系统以上都支持

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

**一、rem**

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhbmFuYTk2MDUzMQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhbmFuYTk2MDUzMQ_size_16_color_FFFFFF_t_70 1][]

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

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

**二、em**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhbmFuYTk2MDUzMQ_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhbmFuYTk2MDUzMQ_size_16_color_FFFFFF_t_70 3][]

使用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值，因为缩放可能会导致图片压缩变形等。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhbmFuYTk2MDUzMQ_size_16_color_FFFFFF_t_70]: /images/20220219/59f3e67e7db44a9788e786f1fb1a9ef7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhbmFuYTk2MDUzMQ_size_16_color_FFFFFF_t_70 1]: /images/20220219/72df22af71e54f138711d04be3639da8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhbmFuYTk2MDUzMQ_size_16_color_FFFFFF_t_70 2]: /images/20220219/10dcd59059344282bb14fb48b56017e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhbmFuYTk2MDUzMQ_size_16_color_FFFFFF_t_70 3]: /images/20220219/7474c1c21f0e41b4bc978aaa01d07471.png