python html5 bootstrap 视频教程

德云社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 4434|回复: 2

px 与 em 的区别及换算

[复制链接]

194

主题

288

帖子

1322

积分

超级版主

Rank: 8Rank: 8

金钱
798
金币
15
威望
0
贡献
0
发表于 2014-12-3 23:01:47 | 显示全部楼层 |阅读模式
AI人工智能 语音助理 人工翻译 教程

为什么有时要使用 em?
  字体单位应该用em而不用px,原因简单来说就是 支持 IE6 下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。  
  在调整的时候,发现不仅仅是字体,将行距 (line-height),和纵向高度的单位都用 em。保证缩放时候的整体性。
  怎么将 px 换成 em 呢?因为中文站用 px 的太多了,如果你是对代码不敏感的纯设计师,可以向技术人员或者页面制作人员请教:

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

重写步骤:
  1.body 选择器中声明 Font-size=62.5%;
  2.将你的原来的 p x数值除以 10,然后换上 em 作为单位;
  简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为 em 的值不固定,又会继承父级元素的大小,你可能会在 content 这个 div 里把字体大小设为 1.2em,也就是 12px。然后你又把选择器 p 的字体大小也设为1.2em,但如果 p 属于 content 的子级的话,p 的字体大小就不是 12px,而是 1.2em=1.2*12px=14.4px。这是因为content 的字体大小被设为 1.2em,这个em值继承其父级元素 body 的大小,也就是 16px*62.5%*1.2=12px,而 p 作为其子级,em 则继承 content 的字体高,也就是 12px。所以 p 的 1.2em 就不再是 12px,而是 14.4px。
  3.重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明,也就是避免以上提到的 1.2*1.2=1.44 的现象。比如说你在 #content 中声明了字体大小为 1.2em,那么在声明 p 的字体大小时就只能是 1em,而不是 1.2em,因为此 em 非彼 em,它因继承 #content 的字体高而变为了 1em=12px。

诡异的12px汉字(原因待查)
  有人在完成 em 转换时还发现了一个诡异的现象,就是由以上方法得到的 12px(1.2em) 大小的汉字在 IE 中并不等于直接用 12px 定义的字体大小,而是稍大一点。这个问题我已经解决,你只需在body选择器中把 62.5% 换成 63% 就能正常显示了。原因可能是 IE 处理汉字时,对于浮点的取值精确度有限。阅读本篇的读者还有其他解释吗?
  本现象只发生在 12px 的汉字,英文不存在此现象。

总结:
  本文认为 em 已经过时了,没必要用 em,因为现在浏览器都升级到新版了。都支持 px 的放大了

版权声明:               
本文由 德云社区 整理,原文来自网络。

AI人工智能 语音助理 人工翻译 教程
回复

使用道具 举报

194

主题

288

帖子

1322

积分

超级版主

Rank: 8Rank: 8

金钱
798
金币
15
威望
0
贡献
0
 楼主| 发表于 2014-12-3 23:02:07 | 显示全部楼层
AI人工智能 语音助理 人工翻译 教程
占用
在线订购 便捷实惠 品质保证 终生保修
回复

使用道具 举报

194

主题

288

帖子

1322

积分

超级版主

Rank: 8Rank: 8

金钱
798
金币
15
威望
0
贡献
0
 楼主| 发表于 2014-12-3 23:02:21 | 显示全部楼层
AI人工智能 语音助理 人工翻译 教程
占用
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|Sitemap|小黑屋|德云社区 |网站地图  

GMT+8, 2024-3-29 10:37 , Processed in 0.029635 second(s), 27 queries .

工业和信息化部: 粤ICP备14079481号-2

技术支持 乐数软件     版权所有 © 2014-2021 德云社区    

快速回复 返回顶部 返回列表