css单位我们常用的是px,也即是像素。随着网页开发自适应的要求,css3新增了许多单位,rem、vw和vh、vmin和vmax、ch和ex等。
em
做前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-size,具有继承的特点。如果字体大小是16px(浏览器的默认值),那么 1em = 16px。
不过,这样使用很复杂,很难很好的与px进行对应,因此,前端开发的前辈们总结了一个经验:
body{font-size:62.5%;
}
那么,这样之后 1em = 10px 在布局等使用的时候好换算了很多。
百分比
百分比相信大家更不会陌生了,百分比一般宽泛的讲是相对于父元素,但是并不是十分准确。
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute;的元素是相对于已定位的父元素(offset parent)
3、对于position: fixed;的元素是相对于 ViewPort。(viewport:可视窗口,也就是浏览器的window那么大。)
rem
rem支持IE9及以上,意思是相对于根元素html(网页),不会像em那样,依赖于父元素的字体大小,而造成混乱。使用起来安全了很多。
html{font-size:62.5%; /**10 ÷ 16 × 100% = 62.5% 1rem = 10px **/}body{1.4rem; *1.4 × 10px = 14px *h1{font-size:2.4rem; *2.4 × 10px = 24p