CSS常用的单位(em/rem、vw/vh、vmin/vmax)
2016-08-06 本文已影响105人
____雨歇微凉
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，具体没有了解太多，据说是基于字体的度量单位，依赖当前设定的字体，感兴趣的可以去问度娘。
