rem .css,CSS rem

在移动端飞速发展的当下，移动端页面的适配越来越成了大家所关注的问题，当我们把PC端的px拿到移动端，发现越来越不适用，媒体查询实在是太繁琐了。进而出现了em、rem、vw等单位来帮助我们实现移动端的自适应布局。

在W3C规范中，对于1rem的定义时

1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem 单位以该属性的初始值作参照。

由此看出，rem是和html元素的字体大小相匹配的。当然我们在很多时候实现rem自适应是，也都是在style中插入html的font-size来制定参照值的。

rem和像素值的关系

那么问题就来了，我们知道了rem是和font-size相关的单位，而且我们也知道最终页面上的计量单位一定也是像素(px)，那么他们俩的关系又是什么样的呢？其实当我们使用rem时，每rem转换为多少像素，取决于html字体大小，即html字体大小乘以rem的值。例如，如果根元素的字体为14px，10rem就为140px

html font-size如何计算

我们知道了rem和像素值的关系，那么我们该把html的font-size设置成多少呢？因为移动端的显示屏比例错综复杂，我们是需要根据不同的屏幕设置不同的根节点字体大小的，以下我们提供两种方式

第一种是通过JS(推荐)

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

if(clientWidth>=750){

docEl.style.fontSize = '100px';

}else{

docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

}

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

// 小米官网rem计算方式

!function(n){

var e=n.document,

t=e.documentElement,

i=720,

d=i/100,

o="orientationchange"in n?"orientationchange":"resize",

a=function(){

var n=t.clientWidth||320;n>720&&(n=720);

t.style.fontSize=n/d+"px"

};

e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))

}(window);

媒体查询(不推荐)

html {

font-size : 20px;

}

@media only screen and (min-width: 401px){

html {

font-size: 25px !important;

}

}

@media only screen and (min-width: 428px){

html {

font-size: 26.75px !important;

}

}

@media only screen and (min-width: 481px){

html {

font-size: 30px !important;

}

}

@media only screen and (min-width: 569px){

html {

font-size: 35px !important;

}

}

@media only screen and (min-width: 641px){

html {

font-size: 40px !important;

}

}

以上~