绝对长度单位表明一个物理测量,当输出介质的物理性质是已知的,如用于打印布局。这是经过将一个单元锚定到一个物理单元,并将其定义为相对于它的另外一个。对于低分辨率的设备,如屏幕、高分辨率设备,如打印机,该锚定是不一样的。css
px
(像素)像素与显示设备相关。对于屏幕显示,一般是一个设备像素(点)的显示。对于打印机和高分辨率的屏幕,一个px
意味着多个设备像素,所以,每英寸的像素的数量保持在96
左右。html
当你须要精确地像素时,用px
设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。由于不一样浏览器为获得一样效果的算法可能不一样,因此显示效果可能有微小的不一样。算法
用像素字体定义使得字体大小不可由用户的浏览器改变。因此,若是想创造能普遍使用的设计请避免使用像素设定字体。浏览器
pt
(磅)1pt = (1 / 72)in
。
另外:1in = 96px
,3pt = 4px
,25.4mm = 96px
等。布局
相对字体大小的单位字体
em
em
值的大小是动态的。当定义font-size
属性时,1em
等于元素的父元素的字体大小。若是你在网页中任何地方都没有设置文字大小的话,那它将等于浏览器默认文字大小,一般是16px。因此一般1em = 16px
,2em = 32p
x。若是你设置了body元素的字体大小为20px,那1em = 20px,
2em = 40px。那个
2就是当前
em`大小的倍数。设计
<body> <div class = "parent"> <div class = "child></div> </div> </body>
body { font-size: 62.5%; /* 1em = 10px */ } .parent { font-size: 2em; /* 2em = 20px */ } .child { font-size: 2em; /* 2em = 40px 相对于.parent元素 */ }
使用时需注意1em
指的是父元素的字体大小。code
rem
(root em
)rem
是CSS3
新增的单位,1rem
等于html
根元素的字体大小。经过它既能够作到只修改根元素就成比例地调整全部字体大小,又能够避免字体大小逐层复合的连锁反应。htm
<body> <div class = "parent"> <div class = "child></div> </div> </body>
body { font-size: 62.5%; /* 1rem = 10px */ } .parent { font-size: 2rem; /* 2rem = 20px */ } .child { font-size: 2rem; /* 2rem = 20px 相对于body元素 */ }
IE8
及如下不支持rem
,可多写一个px
为单位的样式便可。rem