前言：
现时看官们对“rem布局的优点和缺点”大概比较着重，我们都想要知道一些“rem布局的优点和缺点”的相关知识。那么小编在网络上搜集了一些对于“rem布局的优点和缺点””的相关知识，希望小伙伴们能喜欢，朋友们一起来了解一下吧！一、前言
根据前面写的 你不知道的CSS单位，进行了一种响应式布局的思考。
视口布局的优点：宽度和高度全部自动适应！再加上rem布局的字体适应，可以完美解决各种屏幕适配问题！
单位可参考 ： 你不知道的CSS单位
该布局兼容性如下：
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
9.0+ 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0
二、正文
1、vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（解决宽高自动适配）
2、rem布局-解决字体适配（此布局在weex中无法识别）
rem布局原理：根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。
@media only screen and (max-width: 1600px) and (min-width: 1280px){
html{
font-size: 14px;
}
}
@media only screen and (max-width: 1280px) and (min-width: 960px){
html{
font-size: 12px;
}
}
@media only screen and (max-width: 960px){
html{
font-size: 10px;
}
}
3、vw、vh、rem的使用
<template><p class="box"> </p>
</template>
<style type="text/css">.box{
width:50vw;
height: 20vh;
line-height: 20vh;
font-size: 1.5rem;
margin:0 auto;
font-weight: bold;
background-color: rgba(255,255,255,0.8);
}</style>
上面代码中的50vw代表了此p占据视口宽度的50%、高度占据视口高度的20%，并且会随着视口的变化，进行自适应;
字体则是1.5倍的html根字体大小。并且根据媒体查询进行字号变化。
三、感受
使用vw+vh+rem的布局之外，可以再加上elementUI的栅格布局，可以轻松、快速的搭配出真正的响应式布局，但要注意浏览器的兼容性问题！
标签： #rem布局的优点和缺点
