OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

CSS字体大小: em与px、pt、百分比之间的对比


分享到
分类 心得体会   关键字 前端   发布 1518409521  1405687703167
注意 转载须保留原文链接,译文链接,作者译者等信息。  

CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性。在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小。这四个单位哪一种最适合Web? 这个问题引起了广泛的争论。找到一个确定的答案是困难的, 因为这个问题,本身就是如此难以回答。

接触这些单位

1.  “Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展示。一个em等于当前的字体大小,例如,如果文档的字体大小是12 pt,1 em等于12 pt。Ems在本质上是可伸缩的,所以2 em相当于24 pt,.5 em相当于6 pt等。ems由于其可伸缩性和适应移动设备的特性在web文档中正变得越来越受欢迎。

2.  像素(px):像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备。

3.  点(pt):点通常用于印刷媒体(任何打印在纸上的媒体,等等)。一个点等于一英寸的1/72。点更像像素,他们是固定大小的单位,不能伸缩。

4. 百分比(%):百分比单位更像“em”单位,除了一些根本性的差异。首先,当前的字体大小等于100%(比如12 pt = 100%)。当使用百分比单位,你的文字在移动设备上仍然保持完全的可伸缩性和可访问性。

 

那么,区别是什么呢?

当你动态地观察他们就很容易理解字体大小单位之间的区别。一般来说,1 em = 12 pt = 16 px = 100%。当使用这些font-size, 增加基础本字体大小(使用CSS选择器)从100%到120%,让我们看看会发生什么。


正如你所看到的, 随着基本字体大小增加em和百分比单位变大,但px 和 pt 没有变化。为你的文本设置一个绝对的大小很容易,但它是更容易在你的访客使用可伸缩的文本,可以显示任何设备或机器上。出于这个原因,em和百分比单位是web文档文本的首选。

Em和percent的对比

我们定义点和像素单位不一定是最适合web文档,留下来是的em和百分比单位。在理论上,em和百分比单位是相同的,但在应用程序中,他们实际上有一些细微的差别需要着重考虑。

在上面的示例中,我们使用百分比单位作为我们的基础字体大小(body上标记)。如果你把你的字体大小从百分比变为ems(即body{font-size:1 em;}),你可能不会注意到有什么差别。让我们看看当“1 em”是我们的body字体大小,当客户端改变浏览器的“文字大小”设置(这在一些浏览器中可用,如Internet Explorer)会发生什么。


当客户端的浏览器文本大小设置为“medium”, ems和百分比之间没有区别。然而,当设置改变,差别是相当大的。“Smallest”设置,ems比百分比小得多,而当设置为“Largest”,这时恰恰相反,ems比百分比显示地更大。有些可能会说,当真正去扩展时em单位在扩展,在实际的应用程序中,em文本尺度变化太大, 在一些客户端机器上最小的文本变得不是很清晰。

 

结论

理论上,em单位是网上新的和即将到来的字体大小标准,但在实践中,百分比单位似乎给用户提供一个更加一致的和可访问的显示。当客户端设置改变,百分比文本以合理的比例扩展,允许设计师保持可读性,可访问性和视觉设计。

赢家:百分比(%)


附录(2011年1月)

从我写这篇文章已经有几年了,我想总结那段时间所发生的讨论。一般来说,当我开始一个新的设计,我将在body元素上使用百分比(body { font-size: 62.5%; }),然后使用em单位大小来比较。只要body使用百分比单位设置,您可以选择使用百分比或ems或其他任何CSS规则和选择器并且在你的基础字体大小上保持使用百分比的好处。在过去的几年中,这确实成为设计的标准。

像素现在被认为是可接受的字体大小单位(用户可以使用浏览器的“缩放”功能读小文本),虽然由于移动设备非常高的密度屏幕(一些Android和iPhone设备每英寸超过200到 300个像素,让你11 - 12-pixel字体很难看到!)他们也开始引起一些问题。因此,我将继续使用百分比作为web文档中的基础字体大小。一如既往,鼓励和欢迎讨论和想法,感谢在过去的两年里关于这个问题的所有评论!


原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 皇帝的新衣:Node.js
  2. 告别Node.js
  3. 再见了,Heroku
  4. 失败的感觉:一个22岁女孩的创业故事
  5. Java的痛
  6. Android即将支持GO语言,从游戏开始
  7. Hacker News,TechCrunch, Product Hunt 推广效果对比
  8. JavaScript最大堆栈的数量
  9. 树树莓派推出新版本Model B+
  10. 在nginx中使用lua脚本
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. Readme文档驱动型开发
  2. 皇帝的新衣:Node.js
  3. “设计师思维”正在毁灭我们
  4. 现在,你为什么应该学Node.js
  5. 7件你不知道但可以用CSS做的事
  6. NODEJS是人性化的
  7. 用JavaScript的5个原因
  8. 告诉你为什么要合并样式文件的另一个原因
  9. 干嘛不在企业中使用Node.js呢?
  10. 你用什么工具开发JavaScript?

 关键字 - 前端
  1. 5个经典的前端面试问题
  2. 超简易——Bootstrap可关闭tab标签页
  3. 我被问得最多的十个JavaScript前端面试问题
  4. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  5. 15个最好的HTML5前端响应式框架(2014)
  6. 用css禁用input、checkbox、select等html控件,实现disable效果
  7. 用纯css改变下拉列表select框的默认样式
  8. 我们抛弃了AngularJS:单页面应用的5大缺陷
  9. Animate.css让添加CSS动画像喝水一样容易
  10. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号