当前位置:首页 > 编程学习 > CSS中单位 px、em 的区别

CSS中单位 px、em 的区别

编程学习2015-06-0151800


  在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因 为有一部法律来约束他们—例如美国的Section 508,强制网站达到一定的易用性。

css中单位 px、em 的区别 CSS中单位  网页制作 第1张


  关键点:   


  1. 以前IE无法调整那些使用px作为单位的字体大小,但现在几乎IE都支持;


  2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;


  3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。


  px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。


  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作为单位就行了。


  em有如下特点:


  1. em的值并不是固定的;

  2. em会继承父级元素的字体大小。


  所以我们在写CSS的时候,需要注意两点:


  1. body选择器中声明Font-size=62.5%;

  2. 将你的原来的px数值除以10,然后换上em作为单位;

  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。


  也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。


  但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问 题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有 其他的解释。


扫描二维码推送至手机访问。

版权声明:本文由海阔天空发布,如需转载请注明出处。

本文链接:https://apull.net/html/20150601140849.html

标签: 网页制作
分享给朋友:

相关文章

怎样学习C语言

怎样学习C语言

怎样学习C语言很多人对学习C语言感到无从下手,经常问我同一个问题:究竟怎样学习C语言?我是一个教师,已经开发了很多年的程序,和很多刚刚起步的人一样,学习的第一个计算机语言就是C语言。经过这些年的开发,我深深的体会到C语言对于一个程序设计人员多么的重要,如果不懂C语言,你想写底层程序这几乎听起来很可笑,不懂C语言,你想写出优秀高效的程序,这简直就是天方夜谭。为什么C语言如此重要呢?第一:C语言语法结构很简洁精妙,写出的程序也很高效,很便于描述算法,大多数的程序员愿意使用C语言去...

关于学习编程和C语言

关于学习编程和C语言

关于学习编程和C语言  转自 开复网 Q:该怎么学习编程?  A:首先问你一个问题:你们在学校都学些什么课程? 问这个问题的原因是,我认为学校的计算机科学基础课很重要。如果你所在学校的课程设置合理,那你应该先把主要精力花在这些基础课上。很多学生看到基础理论就茫然,不知道这些图表,符号,甚至硬件的知识对将来的软件开发有什么用。用处大得很哪。比如,操作系统课里讲到的多线程的东西在系统编程里很有用。又比如,尽管你将来不会去涉及电脑的...

为什么每个程序员都应该学习C语言

为什么每个程序员都应该学习C语言

为什么每个程序员都应该学习C语言 每个程序员在他们的编程生涯中都应该学习C语言,因为它有太多难以忽视的好处了。除了它会给你提供更多的工作机会之外,C语言还会教给你更多的关于计算机的知识。它能给我们提供的裨益,简单列举如下:   1)相比较其他的编程语言(像C++,JAVA),C语言是个低级语言。从总体上来说,低级的编程语言可以让你更好的了解计算机。   2)设备驱动程序和操作系统只能用C语言来编写。现在,你...

VB.NET关于加密算法

VB.NET关于加密算法

加密将防止数据被查看或修改,并在原本不安全的信道上提供安全的通信信道,它达到以下目的:  保密性:防止用户的标识或数据被读取。  数据完整性:防止数据被更改。  身份验证:确保数据发自特定的一方。  基本概念  1、散列(HASH)函数  散列(HASH)函数H也称哈希函数或杂凑函数等,是典型的多到一的函数,其输入为一可变长x(可以足够的长),输出一固定长的串h(一般为128位、160位,比输入的串短),该串h被称为输入x的Hash值(或称消息摘要Message  ...