1. pt
点(Points),绝对长度单位。
印刷业上常使用的单位,磅的意思,一般用于页面打印排版。
不知道经常做设计的同学知不知道zeplin这个网站,它用的像素单位都是pt。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
用法:
div { font-size:10pt; }
1
2. px
相对长度单位。像素(Pixels)。像素px是相对于显示器屏幕分辨率而言的。
div { font-size:10px; }
1
兼容性和pt一样
px不会因为其它元素的尺寸变化而变化。
像素的大小是会“变”的,也称为“相对长度”,越高位的像素,其拥有的色板也就越丰富,越能表达颜色的真实感。
px特点:比较稳定和精确,但在浏览器放大缩小会出现页面混乱。
一般情况下,我们平时都是用px来定义字体,所以无法用浏览器字体放大的功能,IE无法调整那些使用px作为单位的字体大小。大部分网站能调整是因为用了相对长度单位em或rem。如果改变了浏览器的缩放,web页面样式就会乱掉,这样对于用户来说,就是个大问题了。这时,就提出了相对长度单位。
Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
假设就使用浏览器默认的字号16px,来看一些px单位与rem之间的转换关系:
如果你要设置一个不同的值,那么需要在根元素中定义,为了方便计算,时常将在元素中设置font-size值为62.5%:
html {
font-size: 62.5%;
}
相当于在中设置font-size为10px,此时,上面示例中所示的值将会改变:
3.em
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
相对长度单位。像素(Pixels)。
div { font-size:10em; }
兼容性和pt一样。
em特点:
(1)em的值并不是固定的
(2)em会继承父级元素的字体大小
em表示相对于父元素的字体大小,em是相对单位,没有一个固定的度量值,而是由其它元素尺寸来决定的相对值。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体都是16px,所有未经调整的浏览器都符合:1em =16px。那么12px = 0.75em;10px = 0.625em;为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为:16px*62.5% =10px;这样12px=1.2em;10px=1em,也就是说只需要将你原来数值px除以10就可以了。
使用em的注意点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
4. rem
相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。是CSS3新增的一个相对单位(root em,根em)
div { font-size:10rem; }