在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，chinaui等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是因为有一部法律来约束他们—例如美国的section 508，强制网站达到一定的易用性。
关键点：
ie无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em作为字体单位；
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有如下特点：
em的值并不是固定的;
em会继承父级元素的字体大小。
所以我们在写css的时候，需要注意几点：
body选择器中声明font-size=62.5%;
将你的原来的px数值除以10，然后换上em作为单位;
重新计算那些被放大的字体的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处理汉字时，对于浮点的取值精确度有限。不知道有没有 其他的解释。
0
0
你知道CSS中em与px的区别吗？
怪我咯
发布时间：2017-05-07 11:43:43
|1784人浏览过
|来源于php中文网
原创
相关文章
css框架组件间距不一致怎么办_通过修改变量或工具类调整
css transform 是基础属性吗_变换属性基础理解
css 初级项目中页面层次感不足怎么办_通过颜色和阴影增强层次
css clear 属性到底是干什么用的_通过阻止元素贴靠浮动元素解释
css边框占用空间影响布局怎么办_通过css box sizing调整计算方式
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
2026赚钱平台入口大全
2026年最新赚钱平台入口汇总，涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道，助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。
268
2026.01.31
无需付费的漫画app大全
想找真正免费又无套路的漫画App？本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用，涵盖国漫、日漫、韩漫及经典老番，满足各类阅读需求。阅读专题下面的文章了解更多详细内容。
170
2026.01.31
漫画免费在线观看地址大全
想找免费又资源丰富的漫画网站？本合集精选2025-2026年热门平台，涵盖国漫、日漫、韩漫等多类型作品，支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。
85
2026.01.31
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章
