你的位置:首页 > 网页设计

[网页设计]CSS3单位



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那么大。

例外情况

  1、使用了padding、margin 等,实际百分比和你想要的百分比是有区别的。(关于这个,解决方法之一,就是我们可以使用css3的calc()属性,具体,您请继续往下看,在文章最后我会解释。)  2、line-height百分比的一些情况,通常结果是百分比 计算后的值。(关于这个,您请继续往下看。。。)

 



rem

rem支持IE9及以上,意思是相对于根元素html(网页),不会像em那样,依赖于父元素的字体大小,而造成混乱。使用起来安全了很多。html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5%  1rem = 10px  **/}  body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}这样整个网页都会比较统一!不会造成混乱!

 


vh 和 vw

IE10+ 和现代浏览器都支持这两个单位。

  vw Viewport宽度, 1vw 等于viewport宽度的1%  vh Viewport高度, 1vh 等于viewport高的的1%


vw和vh会随着viewport变化自动变化,再也不用js控制全屏了。

甚至有些人丧心病狂的字体大小都用vw和vh控制,来达到字体和viewport大小同步的效果。


vmin和vmax

IE10+ 和现代浏览器都已经支持vmin

webkit浏览器之前不支持vmax,新版已经支持,所有现代浏览器已经支持,但是IE 全部 不支持vmax

  vmin vw和vh中比较 小 的值  vmax vw和vh中比较 大的值

 


这两个属性也会随着viewport变化
ch和ex

IE9+ 和现代浏览器都已经支持,这两个单位时根据 当前font-family 的相对单位。

  ch 字符0的宽度  ex 小写字符x的高度



当font-family改变的时候这两个单位的值也会变化,不同字体表现的样式不一样。