rem的认识和个人见解

看了很多rem的讲解和很多博客，这里我说说自己对rem的认识。

    rem ： 作为css3新的属性单位，基于document.documentElement元素的fontSize基准值来确定其初始值,让处于

                document内的所有元素基于document.documentElement设置的fontSize来做赋值

                比em更直观，也不容易造成混乱叠加；

    简单一句话，这就是rem的原理和设置1单位rem的方法。

    rem是前端开发人员对mobile设备适配开发的一大主力，所以充斥着很多适配方法，力致于让网页在mobile设备得到更好地展现，让用户能在mobile设备得到更好地体验。

    说起对rem的适配方法，主要是针对document.documentElement元素fontSize属性的设置来调整H5在mobile设备上所占位置的调整；说到mobile设备，那么还要说到一个问题，那就是物理像素、逻辑像素、以及像素比，通常我们的UI设计师们给我们的市面上通用的一些mobile设备H5设计稿，比如640的和750的设计稿，640的设计稿是基于Iphone4和iPhone5s来做的设计稿，750则是根据iPhone6来做的，这里我们要注意一点的就是，设计师们做的640和750的设计稿，是基于物理像素做的，而我们前端开发人员用的css单位 px这些是基于逻辑像素来写的，所以我们需要进行转换，那就需要像素比了，因为   ，

    物理像素 = 逻辑像素 * 像素比；

     经过转换后，我们得到了我们开发所需的逻辑像素，这时候，我们就开始考虑做适配了，这里有一篇文章讲得很好，可是我没找作者，就引用不过来，所以在这打个链接（点击打开链接），这里讲rem的适配讲的非常透彻。

    根据docume.documentElement元素的fontSize决定热门的单位值，

    这里就根据640设计稿和750设计稿来说，因为设计稿不一样，所依照的基准值就不一样；    

  

             6.4 根据640设计稿在设备上做的一个开发基础值，

基础值又为了更好开发，将根元素font-size设置为100px，

取100只是为了计算方便，减少浮点数对布局的影响

1REM=100px；

如果设计稿是750，

因为屏幕是偶数，宽度只能是偶数，不能出现7.5，所以750的设计稿不能默认设置100px，

得到7.5来使用，它是一个单数，

为了更好地开发，我们设置它为75px，750的设计稿，屏宽10rem，1rem=75；

开发基础值为 10 */

             var deviceWidth = document.documentElement.clientWidth;

                 fontSize = deviceWidth / 6.4 + 'px';640

                 fontSize = deviceWidth / 10 + 'px';750

   /* 为了更好地体现出设计界面，那么我们将根据依据 设计稿算出来的基础值来做各个mobile设备的参照值

        所以就有了，fontSize = 视口宽度 / 基础值 + px;

然后就是css的px和rem的换算，为了更快，更方便的转换，在这里，我推荐使用预编译软件

            LESS 、sass SCSS

            如果使用LESS，那么换算函数则为

                @baseFontSize: 设计稿对fontSize计算的值;

                .px2Rem(@name,@px){

                        @{name}:@px/  @baseFontSize * 1rem;

                 }

        

        换算原理，按照设计尺寸@px / 设计稿平分的份数 得到 设计尺寸占据平分份数的比例，

            比例 * 1rem,就得到了 设计尺寸变换单位rem后得到的rem值；

*/

       

/* 如果你需要对兼容设备进行限制，则需要对设备宽度进行判断 */

if( deviceWidth> 640) deviceWidth = 640;

     fontSize = deviceWidth/ 6.4+ 'px';

            想拥有更好地用户体验，就需要考虑页面在mobile设备上的显示问题，这就要涉及到像素比

            

            如果像素比大于2，是3，或4，那么我们的页面在基于drp = 2的情况下就考虑缩放，

            因为缩放比例最大和最小不过1，所以，我们使用 1 / drp 得到缩放比例，

            然后赋值给拥有viewport属性的

            meta标签，我们还要对其 初始缩放比例、最大、最小缩放比例进行设置；

initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + '

         var scale = 1 / devicePixelRatio;

    如果你考虑到pc使用px，mobile设备使用rem，那么你就得去识别浏览器内核，因为mobile设备的浏览器内核和pc端的浏览器内核是不一样的，同时你的css也得写两套，

    如何判断，那就得用到BOM的API    navigator,

    最近在写一个手机端的东西，这边把我配置的rem逻辑附上，希望大家多找麻烦，毕竟我是菜鸟