em与px的区别以及em特点和应用

1风语战神1

1风语战神1

2016-02-19 13:36

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享em与px的区别以及em特点和应用吧。

平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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会继承父级元素的字体大小。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

所以我们在写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处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释

展开更多 50%)
分享

猜你喜欢

em与px的区别以及em特点和应用

Web开发
em与px的区别以及em特点和应用

学习CSS了解单位em和px的区别

Web开发
学习CSS了解单位em和px的区别

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS的长度单位(em)与em标签

Web开发
CSS的长度单位(em)与em标签

EM汁炒虾仁的做法 怎样做EM汁炒虾仁

虾仁
EM汁炒虾仁的做法 怎样做EM汁炒虾仁

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

EM汁炒虾仁的做法 EM汁炒虾仁最正宗的做法

虾仁
EM汁炒虾仁的做法 EM汁炒虾仁最正宗的做法

怎么做EM汁炒虾仁 EM汁炒虾仁做法

虾仁 炒虾仁
怎么做EM汁炒虾仁 EM汁炒虾仁做法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

2.7 ASP中使用Session变量的优缺点

2.7 ASP中使用Session变量的优缺点

介绍J2ME平台的几个重要概念

介绍J2ME平台的几个重要概念
下拉加载更多内容 ↓