1、em/rem
em的大小,取决于自身的字体大小,并乘以em的倍数,代码如下,效果拷贝了自己去试。
<div style="font-size:14px">em<!-- 14px -->
<span style="font-size:1.4em;">em<!-- (14*1.4)px -->
<span style="font-size:1.4em;">em<!-- (14*1.4*1.4)px -->
<span style="font-size:1.4em;">em<!-- (14*1.4*1.4*1.4)px -->
<span style="font-size:1.4em;">em<!-- (14*1.4*1.4*1.4*1.4)px -->
</span>
</span>
</span>
</span>
</div>
比如做一个按钮 -> 只需要改变字体大小,就能够改变按钮的大小,代码如下:
<button class="button">按钮</button>
.button{width:4em; height:2em; font-size:14px;}
比如做一个自定义的组件:
<div class="template">
<header class="header">标题</header>
<section class="section">正文</section>
<button class="button">按钮</button>
</div>
.template{ font-size:24px; height:10em; width:20em; background:gray; padding:0.6em; box-sizing:border-box; }
.header{ font-size: 2em; font-weight: bold; }
.section{ font-size:1.4em; height:2em; }
.button{ width:4em; height:2em; font-size:1.4em; }
接下来值需要改变字体的大小,内部的内容就会跟着自适应,感觉是还不是很哈皮。
缺点是em不适合嵌套太多层的组件否则每部每次都要计算父节点的大小,那就得不偿失了。
然后再说rem,rem的大小,取决于网页根节点的大小。
<div style="font-size:14px">rem
<span style="font-size:1.4rem;">rem
<span style="font-size:1.4rem;">rem
<span style="font-size:1.4rem;">rem
<span style="font-size:1.4rem;">rem
</span>
</span>
</span>
</span>
</div>
个人觉得一个网页用px还是用em还是用rem并不是什么需要纠结的问题,反正都不要钱,完全可以穿插着用,用适合的单位解决适合的问题。
2、vw/vh
vw/vh 当前视窗的1% width/height -> 100vw = 100%视窗宽度 || 100vh = 100%视窗高度
<div style="background:#ccc;width:50vw;height:100px;"></div>
比如,对初学者而言的一个问题,底部在页面超过屏幕时,自适应文档高度,在404等奇葩页面时,紧贴屏幕底部。
<body>
<div class="main">main</div>
<footer>footer</footer>
</body>
<style>
body,html{ padding:0; margin:0; }
.main{ min-height: 100vh; background:#ccc; width:100%; }
footer{ width:100%; height:100px; background:#333; color:#ccc; margin-top:-100px; bottom:0; }
</style>
缺点:这个底部的高度不能自适应,还有更多的解决方案,如果有兴趣的话,我之后会写的,如果你急着知道的话,也可以给我留言。
3、vmin/vmax
vmin/vmax 以当前窗口的最小/最大为百分比,
<div style="background:#ccc;width:50vw;height:100px;"></div>
这个就不多说了,毕竟用的不太多,个人才疏学浅,暂时也没有用到。
另外还有ex和eh,具体没有了解太多,据说是基于字体的度量单位,依赖当前设定的字体,感兴趣的可以去问度娘。
网友评论