使用rem来开发你的移动端网站

时间 2019-11-21

标签使用 rem 开发移动网站栏目无线繁體版

原文原文链接

　what is rem ？css

　　1）css3中的计量元素大小的单位，相似px、pt、em。html

　　2）一种相对根元素font-size的计算方式。1rem = <html>'s font-size px (你懂就好)css3

　　3）使用场景：每一个元素的宽高、文字大小、行距、补白等一切可使用长度单位的地方。iphone

　　4）使用范例: 布局

html{font-size:37.5px;}/*根元素的基础font-size被设置为37.5px，则1rem=37.5px*/
#box1{width:10rem;height:2rem;font-size:0.5rem;}/*box1的宽度10rem则被计算成宽度为375px，高度为75px，文字大小为18.25px；*/
#box1 .title{width:2rem;}/*title的宽度依旧相对于根元素计算，结果为75px*/

　rem在移动端的适配网站

　　由上面的例子能够看出，使用rem进行布局的网站，咱们只须要修改根元素的font-size大小，则整个网页的元素都可以按照预期进行等比例的计算和适配。spa

　　好比，在上面的例子中，咱们将html的font-size改成32px，那么box1的样式则变成了宽320px,高64px,文字大小则变为16px;scala

　　也就是说，在开发过程当中，咱们只要基于一种宽度的设备使用rem进行布局。而后使用js或css的media来根据宽度改变html的基础font-size。就能够适配各类移动端设备了。设计

　　步骤以下：调试

　　　　1）假设咱们拿到了一张750px宽度的设计图。而且准备在iPhone6上进行调试，iphone6的屏幕宽度为375px，他们的比例是2：1；

　　　　　　初始过程：

　　　　　　　　设置<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>

　　　　　　　　设置html{font-size:37.5px} 　　

　　　　　　　　　　//为何设置为37.5px？你也能够设置为其它的值。但为了易于换算和记忆，咱们默认为每种屏幕设置他的基础font-size=（屏幕宽度/10px）;

　　　　　　开发过程：将每一个元素设置的单位使用rem（任何本来使用px，em，pt的地方），数量为（设计图上的元素的实际px/2/37.5）rem；

　　　　　　...

　　　　　　好了，咱们的页面已经开发完成了。

　　　　2）此时，咱们的页面，在iPhone6下面，已是妥妥的了。那么如何兼容其它不一样宽度的移动设备呢？

　　　　　　思路：改变每种不一样宽度的设备的根元素的css属性，使其font-size值都为设备宽度/10px。

　　　　　　方案1：在页面头部插入一段JS。 //为何是头部？--防止页面闪烁

(function() {
    var newRem = function() {
        var html = document.documentElement;
        html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px';
    };
    window.addEventListener('resize', newRem, false);
    newRem();
})();

　　　　　　方案2：在css文件中增长媒体查询

@media (min-width: 320px){html{font-size: 32px;} }
@media (min-width: 360px){html{font-size: 36px;} }
@media (min-width: 375px){html{font-size: 37.5px;} }
@media (min-width: 384px){html{font-size: 38.5px;} }
@media (min-width: 414px){html{font-size: 41.4px;} }
@media (min-width: 448px){html{font-size: 44.8px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 51.2px;} }
@media (min-width: 544px){html{font-size: 54.4px;} }
@media (min-width: 576px){html{font-size: 57.6px;} }
@media (min-width: 608px){html{font-size: 60.8px;} }
@media (min-width: 640px){html{font-size: 64px;} }
@media (min-width: 750px){html{font-size: 75px;} }
@media (min-width: 800px){html{font-size: 80px;} }
@media (min-width: 1024px){html{font-size: 102.4px;} }

　　　　哪一种方案更好些？

　　　　　　css适配了大部分主流的屏幕，而且轻量一些，不须要进行计算。

　　　　　　js根据具体的屏幕宽度进行精确的计算，能够适配所有的设备，

　　　　　　仍是须要根据本身的使用场景进行选择。

rem的兼容性如何？

参考下图：

能够看到，一片飘绿，结果喜人。

rem进行适配的一些优势：

　　1）相对改变viewport，rem的方式不变形，不模糊。

　　2）相对于em，rem不相对于父级，因此不会致使混乱。

　　3）相对于px，无需多说了。

　　4）相对各类媒体查询进行自适应，rem的方式能够一键更改，省了无数代码，且维护方便。

rem的一些不适用场景

　　1）想要在ipad or pc or 超级大屏设备上使用。（好大一堆字&&图片和视频被拉模糊了）。

　　2）想不出来了。

综上所述，rem能够在移动端开发过程当中带来强大的便利性，他或许也有些许缺点，但瑕不掩玉，远远被它的众多优势的光芒覆盖，也将是将来的趋势。