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,这样两者结合会更好。