彩云Sky

ui设计,交互设计,用户体验,前端工程师

微信公众号:彩云译设计(caiyunyisheji)

彻底了解css中的长度单位(2016年版)

在写前端代码的时候经常会被各种各样的css长度单位所困惑,在这里根据自己的经验以及网上找到的参考资料做一个整理。

  1. em

  2. rem

  3. vmin,vmax

  4. ex,ch

  5. vh,vw

  6. pt

  7. px

  8. ex

  9. pc

  10. in

  11. mm

  12. cm


【1】em

实例:

<style type="text/css">
    body {font-size: 12px;}
    div  {font-size: 1.5em;}
</style>
<body>
    <div>
        Test-01 (12px * 1.5 = 18px)
        <div>
            Test-02 (18px * 1.5 = 27px)
            <div>
                Test-03 (27px * 1.5 = 41px)
            </div>
        </div>
    </div>
</body>

因为font-size具有继承性,所以层数越深字体越大。

【2】rem

虽然上面使用em的情况可能会在开发中用到,但是我们有时候想有一个基准来扩展。遇到这种需求时,我们可以使用rem单位,rem中的“r”代表“root”,这意味着设置当前元素的字体大小为根元素,大多数情况下,我们会设置在html元素上。

<style type="text/css">
    html {font-size: 12px;}
    div  {font-size: 1.5rem;}
</style>
<body>
    <div>
        Test-01 (12px * 1.5 = 18px)
        <div>
            Test-02 (12px * 1.5 = 18px)
            <div>
                Test-03 (12px * 1.5 = 18px)
            </div>
        </div>
    </div>
</body>

当然,rem单位不仅应用在字体上,还可以实现到CSS 网格系统中。

【3】vmin,vmax

vw和vh对应于viewport的width和height,而vmin和vmax分别对应于width、height中的最小值和最大值,例如如果浏览器的宽/高被设置为1000px/600px,那么

1vmin = 600 * 1/100;

1vmax = 1000 * 1/100;

【4】ex,ch

ex、ch单位与em、rem相似之处在于都依赖于font-size,但是ex、ch还依赖于font-family,基于font-specific来计算。

图解释下:


这两种单位,有许多用途,大部分是用于印刷时的微调整。例如,sup、sub元素分别显示上标和下标,但是我们可以使用position和bottom模拟:

<style type="text/css">
body {
    margin: 0;
    padding:0;
}
 
.sup {
    position: relative;
    bottom: 1ex;
}
.sub {
    position: relative;
    bottom: -1ex;
}
</style>
<div>
    AaB<span class="sup">b</span>CcXxD<span class="sub">d</span>EeFf
</div>

【5】vh,vw

在进行响应式布局时,我们常常会使用百分比来布局,然而CSS的百分比不总是解决每个问题的最佳方案,CSS的宽度相对于离它最近的父元素的宽度。 如果你想使用视口的宽度、高度而不是父元素的宽高,可以使用vh和vw单位。 1vh = viewportHeight * 1/100; 1vw = viewportWidth * 1/100; 使用vh、vw就可以保证元素的宽高适应不同设备。

【6】pt

点(Point),绝对长度单位。

【7】px

像素(Pixel),相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的。
譬如,WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。

【8】ex

相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

【9】pc

派卡(Pica),绝对长度单位。相当于我国新四号铅字的尺寸。在印刷行业使用

参考文章:http://blog.csdn.net/lishoubox/article/details/7286079/

【10】in

英寸(Inch),绝对长度单位。

【11】mm

毫米(Millimeter),绝对长度单位。

【12】cm

厘米(Centimeter),绝对长度单位。

其中:

1in = 2.54cm = 25.4 mm = 72pt = 6pc

参考文章:

1、http://web.jobbole.com/82490/

2、http://www.css88.com/archives/821

3、http://www.alixixi.com/web/a/2014120994296.shtml

评论
热度 ( 5 )
  1. 逐光的少年彩云Sky 转载了此文字

© 彩云Sky | Powered by LOFTER