动态REM
2019-03-03 本文已影响0人
Camilia_yang
前端开发中的长度单位经常有：
- px 像素
- em 一个‘M'的宽度/一个汉字的宽度
- rem "root em"，意思是根元素(html元素)的font-size
- vh viewport 100vh表示视口高度
- vw view width 100vw表示视口宽度，但这个单位兼容性差
- 网页上字体默认大小为16px，Chrome默认字体最小为12px，所以设置font-size小于12px无效，这个知识点在后面会用到。
rem和em的区别
两个是完全不同的概念，一个font-size是16px的汉字，它的宽度不一定是16px。
但经过测试，在chrome浏览器上，font-size和em的大小一样。
百分比布局
优点是：横向上可以按百分比布局。缺点是：宽度的具体大小无法得知，高度难和宽度产生联系。纵向上难布局。比如要做一个宽高为1:1的盒子，高度无从设置。
要在手机上实现如下布局：
无标题.png
如果按最小屏幕宽度（假设是320px）把宽度写死：
<body>
<div class="parent clearfix">
<div class="child">40%</div>
<div class="child">40%</div>
<div class="child">40%</div>
<div class="child">40%</div>
</div>
</body>
*{margin:0;padding:0;}
.child{
background:#ddd;
float:left;
width:128px;
height:64px;
margin-left:16px;
margin-right:16px;
margin-top:16px;
margin-bottom:16px;
text-align:center;
line-height:64px;
}
.parent{
width:320px;
margin:0 auto;
}
.clearfix::after{
content:'',
display:block;
clear:both;
}
在320px的屏幕上看起来是这样的：
image.png
在更大一点的屏幕上看起来，虽然布局没有混乱，但空白区几乎和内容区看起来一样大了。
image.png
我们希望在大的屏幕上，每一个元素都能按比例变大。
动态REM
rem本身是无法做到随屏幕大小动态改变的，因为rem是依赖于html的font-size的。但是，如果我们将屏幕的width（JS获取）和html的font-size联系起来，那么，rem就间接的依赖于屏幕width。
<script>
var pageWidth=window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px}')
// 1rem = 1 html font-size = 1 page width
</script>
*{margin:0;padding:0;}
.child{
background:#ddd;
float:left;
width:0.4rem;
height:0.2rem;
margin:0.05rem;
text-align:center;
line-height:0.2rem;
}
.clearfix::after{
content:'',
display:block;
clear:both;
}
body{
font-size:16px;
}
除了文字用像素，其他所有元素的宽、高都用rem来表示。
image.png
这样无论在任何屏幕上，元素、空隙的大小比例都是固定的。这是我们想要的。
微调
1.将html的font-size设为pageWith/10，上面所有的rem都*10，就不用出现那么多位小数。
2.当宽度很小时，例如border的宽度一般是1px、2px，这时没有必要去计算出其rem的大小，直接用px或者em就可以了。
