专业建网站如何区别px与em之间的关系和特点

您所在的位置: 首页 > 新闻动态 > 网站建设

专业建网站如何区别px与em之间的关系和特点

发表日期:2011年8月16日文章编辑:广州建网站www.3goweb.cn   网页设计-网站制作浏览次数:1113关键词: 网站建设

专业建网站如何区别px与em之间的关系和特点

专业建网站如何区别px与em之间的关系和特点

平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。今天[广州建网站公司]和大家一起来探讨下“px与em之间的关系和特点”:

1、IE无法调整那些使用px作为单位的字体大小;
2、国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3、Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是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处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

关键词标签: 专业建网站如何区别px与em之间的关系和特点

本文系三行网络原创,转载请注明来自 (广州建网站www.3goweb.cn) 联系电话:020-85628720、15915767698

上一篇: 建网站如何使用css限制图片宽度    下一篇: 广州汽配批发市场大全,永福汽配城,隆福汽配城

网站建设方案

CASE最新案例
WEB网站建设资讯
  1. [广州] 公司网站推广用哪些优化工具比较好
  2. [广州] 现在做百度推广多少钱?2016年百度推广
  3. [广州] 用3G网卡无线信号差,经常莫名连接不上网
  4. [广州] 外贸桑拿房网站建设:6大技巧让网站更具吸
  5. [广州] 微信支付可以找零了!现金找零变成微信红包
  6. [广州] 建网站中网页色彩如何搭配?[色彩大全]
APP手机应用开发资讯
  1. “Floating Stickies”A
  2. 智能餐厅APP开发_助力餐厅实行口碑营销
  3. iOS和Android APP切图命名规
  4. 科学城app开发公司/广州科学城app手
  5. 电商定制APP是企业发展的趋势 定制可向
  6. 手机移动商城购物APP定制开发需要多少钱
广州建网站公司【三行网络】咨询热线:020-85628720

扫一扫加微信
QQ咨询 QQ咨询
TOP