关闭

网页设计中 em 与 px 的含义

标签: 浏览器firefoxiecss百度
2553人阅读 评论(0) 收藏 举报
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,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处理汉字时,对于浮点的取值精确度有限。不知道有没有 其他的解释。
0
0
查看评论

网页设计中,字号的大小 em

在这个显示器百花齐放的时代,网页设计师往往需要考虑不同客户端的浏览体验。 文字大小,是用户体验中的一个重要部分。不同的分辨率,不同的显示器尺寸,不同的DPI,乃至不同的浏览器设置,都会对最终展现的文字大小带来影响。虽然现在很多浏览器已经可以方便地缩放页面,但用户每次光临都要重新缩放,总归麻烦,何况...
  • wenlyli
  • wenlyli
  • 2013-09-10 13:53
  • 1174

em和px的区别一次彻底搞清楚!

在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px。国外人...
  • u013956836
  • u013956836
  • 2015-03-26 16:20
  • 7008

彻底弄懂css中单位px和em的区别

原文地址 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位; 3. Firefox能够调整px和em,但是96%以上的...
  • dongzhouT
  • dongzhouT
  • 2014-11-20 22:25
  • 1406

彻底弄懂css中单位px和em,rem的区别

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作...
  • yaoyuan_difang
  • yaoyuan_difang
  • 2014-08-01 10:12
  • 2132

CSS 中长度单位em、px、ex、%

px 像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em 是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 ex 相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。 如...
  • cui_angel
  • cui_angel
  • 2012-06-26 10:53
  • 8229

关于字体大小px和em的区别

今天在学习JS的过程中,无意中在一个JS中看到了width:12em的写法,才发现px和em的关系,总体来说就是px是固定大小的,em则不固定,而且会继承父级元素的字体大小,px字体在比较老旧的浏览器里,当进行zoom操作的时候,会影响布局,而em由于其变化性,在字体缩进时候可以选用,其它的时候则需...
  • feng360
  • feng360
  • 2012-08-06 10:02
  • 2512

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

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) px 特点: 1. IE无法调整那些使用px作...
  • kataerdeshui
  • kataerdeshui
  • 2014-05-23 11:17
  • 19501

rem,px,em之间的关系和区别

html,css中 rem、px、em 的区别与联系
  • sinat_31597631
  • sinat_31597631
  • 2017-01-04 15:51
  • 773

html5中px,em,rem区别

PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这...
  • sunshineGirl_77
  • sunshineGirl_77
  • 2016-09-21 22:16
  • 680

Js中em与px的区别

欢迎大家收看我的在线Java全套免费教学超清视频: http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html 这是其中的一个视频连接,大家可以拖动到优酷视频下方,订阅我的账号,因为以后我会有更多视频免费提供 百度搜索:输入Fcs_D调的码农 ,或者输入&...
  • laokdidiao
  • laokdidiao
  • 2015-01-05 11:01
  • 1351
    个人资料
    • 访问:6387083次
    • 积分:61437
    • 等级:
    • 排名:第52名
    • 原创:334篇
    • 转载:1720篇
    • 译文:19篇
    • 评论:178条
    博客专栏
    网上乐园
    最新评论