rem原理详解

**rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。

**rem布局原理

拿到设计稿，按照设计稿的宽去设置一个合适的rem ,配合js查询屏幕大小来改变html的font-size，从而达到适配各种屏幕的效果

**rem布局优缺点

优点，宽度自适应，可以完美适配不同宽度的屏幕

缺点，高度不固定，如果遇到高度要求很严格的就实现不了

**rem 常用换算模式式

1em = 16px; 

html{

font-size:16px;

}px

html{

font-size:62.5%  // 10/16*100% 也就是设置 是10px

}

其实也就是我们设置页面根元素字体font-size 是多大 1em 就是多大 以上是两个常用标准 比

根据媒体查询，不同屏幕之间用不同的标准

@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 的标准模式

html{ font-size : 10px ; }

}

@media only  screen  and (min-device- width :  375px )and (-webkit-min-device-pixel-ratio:  2 ) {

　　//针对大多数iPhone 6 的标准模式

html{ font-size : 12px ;}

}

   

@media only  screen  and (min-device- width :  375px )and (-webkit-min-device-pixel-ratio:  3 ) {

　　//针对所有iPhone 6 +的放大模式

html{ font-size : 16px ;}

   

}

@media only  screen  and (min-device- width : 412px ) and (-webkit-min-device-pixel-ratio:  3 ) {

　　//针对所有iPhone 6 +的标准模式, 414px 写为 412px 是由于三星Nexus  6 为 412px ，可一并处理

html{< font-size : 20px ;}

}

**基于JS动态计算font-size

( 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 :检测屏幕发生反转时，就是是横屏还是竖屏时

clientWidth :就是设备的宽度

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; :核心就是这句设置根元素的字体大小是clientWidth/320*20