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

关键点  1. IE无法调整那些使用px作为单位的字体大小;
  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处理汉字时,对于浮点的取值精确度有限。不知道有没有
其他的解释。

em(倍)与px的区别的更多相关文章

  1. em与px的区别 [ 转 ]

    其实,还是不大理解,为什么1em=16px:而且,还一般要在body里面,就写清楚Fone-size=62.5%,然后再让1em=10px进行使用:那么,为什么不直接在当时定义em的时候,就直接让它等 ...

  2. CSS中px和em属性的特点与区别

    详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...

  3. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

  4. em与rem之间的区别以及移动设备中的rem适配方案

    em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...

  5. em(倍)与px的区别

    在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...

  6. em(倍)与px的区别(转载)

    在国内网站中,包括三大门户,以及"引领"中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使 ...

  7. 转载:em(倍)与px的区别

    转载出处:http://www.cnblogs.com/showker/archive/2010/05/24/1742821.html 在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理 ...

  8. rem、em、px的区别

    px 像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或re ...

  9. CSS中em、rem和px的区别

    任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px,1rem=16px. EM特点  1. em的值并不是固定的: 2. em会继承父级元素的字体大小. rem特点 r ...

随机推荐

  1. (Java实现) 洛谷 P1091合唱队形

    题目描述 NN位同学站成一排,音乐老师要请其中的(N−K)位同学出列,使得剩下的KK位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2,-,K1,2,-,K,他们的身 ...

  2. Java实现 LeetCode 556 下一个更大元素 III(数组的翻转)

    556. 下一个更大元素 III 给定一个32位正整数 n,你需要找到最小的32位整数,其与 n 中存在的位数完全相同,并且其值大于n.如果不存在这样的32位整数,则返回-1. 示例 1: 输入: 1 ...

  3. Java实现 LeetCode 518 零钱兑换 II

    518. 零钱兑换 II 给定不同面额的硬币和一个总金额.写出函数来计算可以凑成总金额的硬币组合数.假设每一种面额的硬币有无限个. 示例 1: 输入: amount = 5, coins = [1, ...

  4. Java实现 LeetCode 380 常数时间插入、删除和获取随机元素

    380. 常数时间插入.删除和获取随机元素 设计一个支持在平均 时间复杂度 O(1) 下,执行以下操作的数据结构. insert(val):当元素 val 不存在时,向集合中插入该项. remove( ...

  5. Java实现 LeetCode 64 最小路径和

    64. 最小路径和 给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例: 输入: [ [1,3,1], ...

  6. Java实现蓝桥杯互补二元组

    分三处 1.当差值为0并且只有一个二元组就不管他 2.当差值为0并且二元组个数>=1加上他并减去它本身 3.当差值为存在并且不为0时直接加上他 因为都计算了两次,所以最后ans/2 用了map的 ...

  7. Java实现背包问题

    1 问题描述 给定n个重量为w1,w2,w3,-,wn,价值为v1,v2,-,vn的物品和一个承重为W的背包,求这些物品中最有价值的子集(PS:每一个物品要么选一次,要么不选),并且要能够装到背包. ...

  8. .NET Core SDKs installed: No SDKs were found.

    问题描述 今天vs2019创建了asp.net core项目,发现无法加载项目.尝试打开之前的.net core项目项目,同样无法加载项目. 打开cmd,输入 dotnet ,提示 .NET Core ...

  9. 关于MYSQL的查询时间段、删除数据、查询目标行的命令用法。

    Q1.第一次工作写命令时,写了一个把一个表的数据插入到另一个表中,运行时命令长时间处于执行状态. A.第一次处理数据库大量数据,长时间按运行属于正常现象,这与学校中的小数据不同. Q2.如何查询数据库 ...

  10. 使用SSH远程管理时本地文件被修改了

    背景: 有两个网段:1段作为工作网段即员工办公用:2段作为专用网段配置了一系列需要的环境. 在Ubuntu 16.04用Python的SSH工具在对这两个网段远程管理,我写了一个检测环境的脚本,用SF ...