在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,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处理汉字时,对于浮点的取值精确度有限。不知道有没有 其他的解释。

转自:http://www.cnblogs.com/showker/archive/2010/05/24/1742821.html

em和px的更多相关文章

  1. em 和 px相互转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. em与px的区别 [ 转 ]

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

  3. rem和em和px vh vw和% 移动端长度单位

    1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...

  4. rem,em,与px的比较用法

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

  5. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  6. b1.关于em和px的关系

    一般默认 1em=12px ,  em相对于其父元素的px定义: 但是 如果本身元素设置 font-size: 15px;  em与px的比例随之变化. 一般根据浏览器默认的font-size:12p ...

  7. css单位em、px、rem和pt的区别

    1.PX :像素(Pixel) PX是相对长度单位,它是相对于显示器屏幕分辨率而言的. 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况. 2.EM:是相对长度单位. EM ...

  8. em与px区别-CSS教程

    在现在的网页设计中,网页设计者都非常注重用户体验.而CSS中,font-size使用em还是px,如果选择不好将会影响到我们的用户体验.大部分的网页设计者认为px比em容易使用,或者有些根本就不知道e ...

  9. em和px区别

    附:(http://www.cnblogs.com/leejersey/p/3662612.html) em单位说明 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值.任 ...

  10. rem、em、px之间的转换

    rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...

随机推荐

  1. XAF对Attribute的总结

    [Aggregated] 没有参数,作用于a property or a field,并且只能是持久类的引用或者XPCollection.实现两个持久类的级联删除的功能. [Association(& ...

  2. Qt 学习之路 2(73):Qt 线程相关类

    Home / Qt 学习之路 2 / Qt 学习之路 2(73):Qt 线程相关类 Qt 学习之路 2(73):Qt 线程相关类  豆子  2013年11月26日  Qt 学习之路 2  7条评论 希 ...

  3. SPOJ - COT2 离线路径统计

    题意:求\(u\)到\(v\)的最短路径的不同权值种类个数 树上莫队试水题,这一篇是上篇的弱化部分,但可测试以下结论的正确性 设\(S(u,v)\):\(u-v\)最短路径所覆盖的点集 \(S(u,v ...

  4. [转] Kubernetes集群安装文档-v1.6版本

    [From] https://www.kubernetes.org.cn/1870.html http://jimmysong.io/kubernetes-handbook

  5. 《STL详解》读书笔记

    vector 向量容器v.insert(v.begin(), num);//增加v.erase(v.begin(), v.end()); //擦除v.erase(v.begin());reverse( ...

  6. 4.整体架构和Smart Scan

    寻道时间: 外圈,比内圈要多, 即外圈是比较快的. 第一次创建grid disk 时,是创建外圈,用于存放数据的,内圈存储归档这些数据 CellCLI> CREATE GRIDDISK ALL ...

  7. http请求报头和响应报头(1)

    1.web端不可避免的http缓存机制,要理解缓存机制,先来了解下http的请求报文和响应报文的内容 2.请求报文  2.1请求行    请求行三部分组成:请求方法.URL以及版本协议 请求的方法有G ...

  8. poi读取excel2010

    package com.icss.test; import java.io.FileInputStream;import java.io.InputStream;import java.util.Ar ...

  9. select 点击的时候获取 value值

    <select onchange="selectUrl1(this.options[this.options.selectedIndex].value);">      ...

  10. C#DataTable与Model互转

    /// <summary> /// 实体转换辅助类 /// </summary> public class ModelConvertHelper<T> where ...