仰望星空的天台

0%

网页中支持的长度单位

绝对单位

mm(millimeter)

实际毫米

cm(centimetre)

实际厘米

in(Inch)

实际英寸

pt(Point)

点,多用于打印机

pc(哌卡)

相当于我国4号铅笔的尺寸,

px(pixel)

最常见的单位就是像素了,网页设计中最常用的单位

相对单位

%(Percentage )

相对于浏览器窗口大小

em(相对于字体 The height of the element’s font )

像素单位相对于浏览器的字体默认长度16px的值,这个默认值随终端的改变,也会改变. 如果需要做响应式布局的话,使用em来兼容不同的终端

div{font-size:1.5em; }
/*  长度就是1.5*16px=24px  */

ex(相对于x字符的高度 The height of the letter “x”)

相对于x字母的高度(css1.0的单位现在较少使用)

rem(The height of the root element’s font )

随Css3引进的新单位,相对于根元素html,只要那么html底下设置一个定值,其他元素就会参考这个定值,设定其长度

html{font-size:10px;}
div{font-size:1.5rem;}
/*  长度就是1.5*10=15px  */

为什么要这么多单位

有人可能会认为很奇怪,写个网页要那么多单位干什么,标准为什么不能统一呢? 实际上,这么html所应用的不单单是网页,很多终端(如打印机,投影屏,点触盲文机)也要读取网页信息,所以那么不同的单位对应不同的终端需求

一些参考公式

以默认浏览器字体大小16px为例子

1em = 16px 1px = 1/16px = 1px=0.0625em

1 点 = 1/72 in 1 皮卡 = 12 点

Table of Contents