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

CSS中单位 px、em 的区别

编程学习2015-06-0138920


  在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,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

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

相关文章

VB.NET中如何扩充字符串进行固定宽度显示

VB.NET中如何扩充字符串进行固定宽度显示

  在VB.NET中,当你需要在控制台显示数据或准备好打印数据时,可能需要调整列宽以显示固定长度的数据。本文介绍了使用String对象的PadLeft方法和PadRight方法扩充字符串以进行固定宽度显示。PadLeft和PadRight方法      PadLeft和PadRight是字符串类的两个方法,可以分别使用它们在字符串的左边和右边填充空格。这两个方法多接受一个代表总长度的整型数,添加的空格数等于填充总长度减去字符串的当前长...

C++实现十进制转换为二进制

C++实现十进制转换为二进制

这个写得有些早了,学习c++是写的。现在看到很多帖子问这个问题,把这个贴上来供大家参考下。/* * FileName: bin.cpp * * 转换十进制为二进制 * * Apull * 2005-12-2 */ #include <iostream> #include <cstdlib> using namespace std; const int size = sizeof(int) *...

代码迷惑技术如何保护Java免遭逆向工程

代码迷惑技术如何保护Java免遭逆向工程

很少有问题比程序员遇到不访问无法利用的源代码就无法解决的漏洞更令人沮丧的了。你是否在通过一个在线开源库修补代码,或正在调用常用操作系统例行程序;你可能每周都要花时间处理不是由你编写,因而也无法访问其源代码的代码。因为Java字节码包含许多和原始代码相同的信息,所以很容易对Java类文件执行逆向工程。另外,Java程度以其“一旦编写,随处运行”特性而闻名。虽然并非Java语言的专利,但代码反编译从未在Java开发者之中得到如此公开或普遍地利用。反编译的对...

VB/VB.net 只允许运行一个实例

VB/VB.net 只允许运行一个实例

VB/VB.net  只允许运行一个实例       by:  Apull  VB中的实现方法VB如何防止程序被重复加载,也就是只允许运行一个实例,一般有2种方法。一,直接用VB提供的APP对象的PrevInstance方法。PrevInstance的返回值为True则说明已经有一个实力在运行。If App.PrevInstance Then Msgbox "已经有一个实例在运行" End if这个...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。