所以,就计算机的屏幕而言,相对长度和绝对长度没有本质差别。任何单位其实都是像素,差别只是比例不同。
如果把讨论扩展到其它输出设备,比如打印机,基本的长度单位可能不是像素,而是其它的和生活中的度量单位一致的单位了。
CSS绝对长度单位是对于输出设备(output device)而言的。拿pt来说,这是一个在文字排版工具(word,adobe等)中非常常用的字体单位,不管你的显示器分辨率是1024*768,还是800*600,同一篇文档打印在纸面上的结果是一样的。
写网页用哪个长度单位更好,是px还是pt呢?或者em?
全看你自己。
当然,也有浏览器能够调整px和em,比如firefox。
px和em都是相对长度单位,不同的是,他们的所参考的对象不一样,px是相对于显示器屏幕分辨率而言的;em是相对于当前对象内文本的字体尺寸而言的;而pt是绝对单位。
这里只讨论em和px的转换,不讨论pt。
如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。而任意浏览器的默认文本大小都是16px。
于是乎,所有未经调整的浏览器都符合这个转换公式:1em=16px。
有理可得:12px=0.75em;10px=0.625em。
不过,每次都写转换是不是太烦躁了,CSS出现的目的本来就是为了让我们更轻松的。所以为了简化font-size的换算,最好在CSS中的body选择器中声明:font-size=62.5%,(就像是一个中间转化公式,方便接下来的单位转换)
这就使em值变为:
16px62.5%=10px,
这样12px=1.2em;10px=1em。
也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:px20=1em)
em有如下特点:
- em的值并不是固定的;
- em会继承父级元素的字体大小。
- 避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
其他CSS单位
% 百分比
in 英寸
cm 粒米
mm 毫米
em 1em等于当前的字体尺寸;2em等于当前字体尺寸的两倍;例如,如果某元素以12pt显示,那么2em是24pt;在CSS中,em是非常有用的单位,因为它可以自动适应用户所使用的字体。
in 英寸
cm 粒米
mm 毫米
em 1em等于当前的字体尺寸;2em等于当前字体尺寸的两倍;例如,如果某元素以12pt显示,那么2em是24pt;在CSS中,em是非常有用的单位,因为它可以自动适应用户所使用的字体。
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)
PS:根据网络资料整理
参考资料:《CSS入门经典》
http://baike.baidu.com/view/350386.htm#4
http://www.w3school.com.cn/css/css_font.asp
http://www.w3school.com.cn/css/css_units.asp
http://www.blabla.cn/css_tutorials/060_css_length_unit.html
没有评论:
发表评论
请猛烈的点击吧,少年!