rem响应式布局

1.什么是rem？
当前页面中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的
2.rem配合媒体查询实现响应式布局。

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}

3.如何做rem响应式布局？
1、从UI设计师拿到PSD设计稿,然后在样式中给HTML设定一个font-size的值，我们一般都设置一个方便后面计算的值，例如：100px。

html{
font-size:100px；//1rem=100px
}

2、写页面，写样式
首先按照设计稿的尺寸来写样式，然后在写样式值的时候，需要把得到的像素值除以100计算出对应的REM的值。
值得注意的是：真实项目中外层盒子的宽度我们一般还是不写固定值，沿用流式布局法的思想，我们用百分比的方式布局

margin:0  0.2rem
height:3rem；

3、根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size的值
例如：设计稿宽度为640px,其中有一个部分是轮播图，它的尺寸是600*300，在样式中给HTML设定一个font-size的值为100px,则轮播图大小应该为 6rem×3rem，那如果手机屏幕宽度为375px,其font-size应该设置为多少。

375/640*100->fontsize=58.59375//此时轮播图能自适应手机屏幕大小

根据当前屏幕宽度和设计稿宽度的比例，动态计算一下当前宽度下的fontsize值应该是多少，如果fontsize的值改变了，之前设定的所有REM单位的值自动会跟着放大或者缩小。可以通过以下这段代码实现：

但如果当前屏幕宽度大于设计稿宽度，图片会被拉长而失真，所以以上代码需要稍微做些修改：

//html部分

<section id="main">
<div class="box"></div>
</section>

//js部分

<script>
~function（）{
var desW=640,
winW=document.documentElement.clientwidth,
ratio=winW/desW；
var oMain=document.getElementById（“main“）；
if(winW>desW){
oMain.style.width=desW+"px"；
oMain.style.margin="0 auto"；
return；
}
document.documentElement.style.fontSize=ratio*100+“px“；
}();
</script>