rem与px换算的计算方式

时间 2019-11-14

标签 rem 换算计算方式栏目 CSS 繁體版

原文原文链接

前言

这段时间的小项目中算是真正意义上使用了rem来进行移动端的页面布局，项目结束了我反思了一下以前的对于rem的使用...原来我之前对rem用法彻底是在搞笑啊！！结合此次这个小项目，我以为我也有必要对rem布局以及用法进行一次总结。javascript

ps.文笔可能不太好...css

1.什么是rem

来自于鹅厂ISUX团队的解释以下： rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem你们必定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很类似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。html

因此这里总结一句，所谓依赖根元素来计算的方式，就是先给予html元素一个font-size，而后咱们全部的rem就根据这个font-size来计算java

例如：web

 
        html{  
        font-size 
        : 
        16px 
        ;}

那么咱们这里的1rem就应该这么来计算：1x16=16px=1rem；浏览器默认为16px可能形成rem计算上的麻烦和多位小数，因此，咱们也能够进行这种方式的初始化根元素：chrome

这样初始化以后，咱们来进行rem计算的时候，就会减小许多的麻烦。浏览器

2.设置viewport配合进行缩放

一般在写移动端页面的时候，咱们都会设置viewport，保证页面缩放没有问题，最多见的viewport的meta标签以下：架构

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

这个标签的参数就再也不作详细解释，若是有须要了解详细的参数分析与解释，能够参考个人这篇博文：http://www.cnblogs.com/azhai-biubiubiu/p/5305022.htmlless

至于为何要加入viewport，我以为就是由于如今市面上虽然有那么多不一样种类不一样品牌不一样分辨率的手机，但它们的理想viewport宽度概括起来无非也就 320、360、41四、等几种，都是很是接近的，理想宽度的相近也就意味着咱们针对某个设备的理想viewport而作出的网站，在其余设备上的表现也不会相差很是多甚至是表现同样的。布局

3.怎么样在不一样分辨率的状况下计算根元素须要的font-size的值

关于这个点，其实有两种解决方案，一种是基于CSS的状况，另一种就要经过js计算得到

a.基于CSS

通常咱们作页面，确定都会有设计图，移动端页面，通常状况下，UI出图都会定宽为640px，这也是移动端的标准尺寸；可是，咱们也不能排除可能有其余特殊的状况可能须要作其余大小的设计图。因此，咱们能够先定一个基准，而后来看看isux团队的整理出来的一个表格：

经过表格，咱们能很清楚的看出各类分辨率下该如何计算，例如：320下的html的font-size就应该为320/640=0.5 因此，当以640为基准的font-size是20px时，咱们就应该给320的定义为10px;

怎么作到基于不一样的分辨率来定义呢？不用说，首先想到的确定就是媒体查询。当咱们基于媒体查询来作屏幕自适应时，首先要考虑下须要作那些屏幕，毕竟时下各类类型的手机让人眼花缭乱，分辨率也是多种多样，这里我作一下简单的例举，是我在过往项目中涉及到常见的屏幕分辨率的媒体查询：

 
   
    
      
      
        @media only  
        screen  
        and (min-device- 
        width 
        :  
        320px 
        )and (-webkit-min-device-pixel-ratio:  
        2 
        ) { 
       
 
            
        //针对iPhone  
        4 
        ,  
        5 
        c, 
        5 
        s, 全部iPhone 
        6 
        的放大模式，个别iPhone 
        6 
        的标准模式<br>　　html{<br>　　　　 
        font-size 
        : 
        10px 
        ;<br>　　} 
       
 
        } 
       
 
        @media only  
        screen  
        and (min-device- 
        width 
        :  
        375px 
        )and (-webkit-min-device-pixel-ratio:  
        2 
        ) { 
       
 
        　　//针对大多数iPhone 
        6 
        的标准模式<br>　　html{<br>　　　　 
        font-size 
        : 
        12px 
        ;<br>　　} 
       
 
        } 
       
 
            
       
 
        @media only  
        screen  
        and (min-device- 
        width 
        :  
        375px 
        )and (-webkit-min-device-pixel-ratio:  
        3 
        ) { 
       
 
        　　//针对全部iPhone 
        6 
        +的放大模式<br>　　html{<br>　　　　 
        font-size 
        : 
        16px 
        ;<br>　　} 
       
 
            
       
 
        } 
       
 
        @media only  
        screen  
        and (min-device- 
        width 
        : 
        412px 
        ) and (-webkit-min-device-pixel-ratio:  
        3 
        ) { 
       
 
        　　//针对全部iPhone 
        6 
        +的标准模式, 
        414px 
        写为 
        412px 
        是因为三星Nexus  
        6 
        为 
        412px 
        ，可一并处理<br>　　html{<br>　　　　 
        font-size 
        : 
        20px 
        ;<br>　　} 
       
 
        } 
       
 
    
 
   
 

上述为现阶段常见的iPhone系列的媒体查询，对于安卓方面，我发现好像只要作好了6p+和6的，基本在安卓主流机型上的表现都会很好。可是考虑到有些其余的项目可能会出现向下兼容较低版本的状况，我这边提供几个媒体查询的例子，可是具体的数值，我以为可能须要你们自行计算一下。

 
        @media only  
        screen  
        and (-webkit-device-pixel-ratio:. 
        75 
        ){  
        /*低分辨率小尺寸的图片样式*/ 
       
        } 
       
        @media only  
        screen  
        and (-webkit-device-pixel-ratio: 
        1 
        ){  
        /*普通分辨率普通尺寸的图片样式*/ 
       
        } 
       
        @media only  
        screen  
        and (-webkit-device-pixel-ratio: 
        1.5 
        ){  
        /*高分辨率大尺寸的图片样式*/ 
       
        }

b.基于JS进行屏幕分辨率计算

咱们来看这么一段js：

 
        ( 
        function  
        (doc, win) { 
       
        var  
        docEl = doc.documentElement, 
       
        resizeEvt =  
        'orientationchange'  
        in  
        window ?  
        'orientationchange'  
        :  
        'resize' 
        , 
       
        recalc =  
        function  
        () { 
       
        var  
        clientWidth = docEl.clientWidth;<br>　　　　　　　window.innerWidth>max ?  window.innerWidth : max; 
       
        if  
        (!clientWidth)  
        return 
        ; 
       
        docEl.style.fontSize = 20 * (clientWidth / 320) +  
        'px' 
        ; 
       
        }; 
       
        if  
        (!doc.addEventListener)  
        return 
        ; 
       
        win.addEventListener(resizeEvt, recalc,  
        false 
        ); 
       
        doc.addEventListener( 
        'DOMContentLoaded' 
        , recalc,  
        false 
        ); 
       
        })(document, window);

其实有点尴尬的问题在于...这段代码的详细做用我也未能彻底理解，可是经过其中的某些关键词，我先作下大体的分析：

orientationchange：这是一个事件，菜鸟教程中作了这么一个解释：事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。

如下理解，可能并非很准确！！只是让我本身明白了是个啥东西！各位千万别被带坑里去了！也但愿大神在底下指正分析下这段代码！

其实这段代码，主要起到的做用是监听，代码的核心就是这么一句：

 
        docEl.style.fontSize = 20 * (clientWidth / 320) +  
        'px' 
        ;

这句话决定了几个关键：1.基于根元素计算rem所须要的font-size；2.规定了设计图的基准尺寸以及基准的font-size。因此，在须要用到这段JS的时候，咱们只须要根据UI设计图，规定好基准的font-size和统一的UI设计图尺寸就行了。

基于这段JS，咱们的项目处理中也利用了这种方式，可是不一样的是并无使用JS，而是根据这种预约义基准量的方式，在less中进行计算后获得能够自适应的尺寸

 
        //html  
        font-size 
        :  
        20 
        -40 
       
        //对应屏幕宽度 
        320 
        -640 
       
        //当前设计稿是 
        750 
        ，咱们用设计稿 
        100% 
        的宽度来测量比较方便， 
       
        //因此须要base换算 
       
        @base: ( 
        640 
        / 
        750 
        )/ 
        40 
        rem;//rem是最后算出结果的单位

而后看看下面这个例子：

 
        .tag { 
       
        display 
        : inline- 
        block 
        ; 
       
        font-size 
        :  
        22 
        *@base; 
       
        text-align 
        :  
        center 
        ; 
       
        border-radius:  
        20px 
        ; 
       
        margin-bottom 
        :  
        20 
        *@base; 
       
        padding 
        : 
        10 
        *@base  
        20 
        *@base; 
       
        }

例子中的@base就是预编译好的，能够进行计算的基准变量，而后例子中的尺寸变化，我是根据UI的PSD中百分百尺寸下的测量获得的数值乘以基准值。这样作可能有些麻烦，可是好处在于对于UI的还原度会特别高，基本能够作到像素级的UI还原，那咱们来看看效果：

能够看出，在chrome的移动端模拟器下，大、中、小三种分辨率下，布局并无产生变化，发生变化的仅仅只有内容而已。在移动端代码中，咱们通常只会定义元素的width，使其height自适应，可是使用这种变量的形式，height也能够进行定义，使咱们的CSS更为严谨些。

4.流式布局与rem布局的区别

在流式布局下：

网页的主要架构部分按照百分比布局，宽度百分比，高度定死；

若是是图片宽度设置百分比，高度根据图片的比例自适应，若是是封面图片能够高度定死，用background-size:cover显示部分就行；

在rem布局下，以前已经说了不少，这里就说下和流式布局的区别：

rem布局须要基于根元素的基准量来作的，不一样屏幕分辨率设置不一样的基准量，那么对UI的还原度就会很高，可是...发现了一个rem的问题...就是若是页面设计比较看重元素间隔和高度的话...那么用rem布局就会比较难受

5.总结下

其实在实际项目中，感受使用rem仍是比较方便的，并且学习成本也不高。若是有同窗遇到移动端项目而不须要考虑PC端的话，rem绝对能让人写CSS比较舒服。

学无止境，以上就是我对rem的一些总结和整理，但愿能对看到这篇博客的人有所帮助，也但愿能有大神在评论里指出个人不足之处。

完结撒花~