在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,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. nRF51822外设应用[2]:GPIOTE的应用-按键检测

    版权声明:本文为博主原创文章,转载请注明作者和出处.    作者:强光手电[艾克姆科技-无线事业部] 1. nRF51822寄存器类型 nRF51822的寄存器和一般的单片机有所差别,nRF51822 ...

  2. jQuery EasyUI Datagrid组件默认视图分析

    在Datagrid基础DOM结构的一文中,我对Datagrid组件的骨架做了很详细的描述.有了骨架还并不完整,还得有血有肉有衣服穿才行.强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健 ...

  3. CentOS 中安装nginx

    Centos6.8 yum  安装 nginx  1:使用yum安装nginx,安装nginx库 [root@hadoop110 //]# rpm -Uvh http://nginx.org/pack ...

  4. tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册

    tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册 引言 #在数据库,所谓表关系,只是人为认为的添加上去的表与表之间的关系,只是逻辑上认为的关系,实际上数据库里面的表之间 ...

  5. HDU_2082 找单词 【母函数的应用】

    题目: 假设有x1个字母A, x2个字母B,..... x26个字母Z,同时假设字母A的价值为1,字母B的价值为2,..... 字母Z的价值为26.那么,对于给定的字母,可以找到多少价值<=50 ...

  6. webstrom 搭建 nodejs

    1.安装好 nodejs .下载地址 http://nodejs.org/#download,一路next,位置自己定,直到完成. 2.安装好 webstorm.官网下载,破解方法很多,自己搜吧. 3 ...

  7. 118th LeetCode Weekly Contest Powerful Integers

    Given two non-negative integers x and y, an integer is powerful if it is equal to x^i + y^j for some ...

  8. jenkins显示发送邮件发送成功但是邮箱没收到

    jenkins显示发送邮件发送成功但是邮箱没收到 解决方案: 重新配置一下系统管理-系统设置-Extended E-mail Notification

  9. win 引用win32无效问题

    我使用pycharm 安装: python window 10 下安装win32 module 问题:安装后引用win32api等依赖,无效,但是目录下确实已经安装: 解决方案: ${python_h ...

  10. 基于setTimeout制作滚动广告板

    很多网站在其门户页面的上方正中央都会放置一个滚动广告板,用于显示一些推荐信息,用户点击即可进入浏览.比较常见的就是各个公司的官网,电商网站的首页等. 下面是天猫的滚动广告板截图. 其实,不需要借助于什 ...