关于移动端适配的Rem

Rem起初困惑了我很久，结合了多篇Rem的文章，今天总算搞明白了，因此和一些还没明白的人分享一下心得。

本文章半原创半转载，因为是根据好几篇文章以自己能理解的方法做了总结。

首先，移动端的适配有三个重点。

1.流式布局

也就是说用百分比布局在移动端会好一点。

2.利用媒体查询

@media screen and (min-width:480px) and (max-width:960px){

body{
background-color:red;
}

}

3.Rem

首先，移动端屏幕分辨率各不相同，因此，我们可以使用Rem

在css里设置html的font-size

<style>
 html{
font-size:62.5%;
}
</style>

假如，该页面的p标签需要改变字体大小为20px，则可设置为：

<style>
p{
font-size:2rem
}
</style>

其他的都类似于这样，这是我的理解方法。

如果对于分辨率不同的情况下，可以使用媒体查询+rem，这样两者结合会更好。