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, 5c,5s, 所有iPhone6的放大模式，个别iPhone6的标准模式

html{font-size:10px;}

}

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

　　//针对大多数iPhone6的标准模式

html{font-size:12px;}

}

   

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

　　//针对所有iPhone6+的放大模式

html{font-size:16px;}

   

}

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

　　//针对所有iPhone6+的标准模式,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