你知道CSS中长度单位pt、px、dpi的意思吗?

2016-02-19 23:28 18 1 收藏

图老师小编精心整理的你知道CSS中长度单位pt、px、dpi的意思吗?希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发 】

  在印刷排版中point是一个绝对的单位,它等于 1/72 英寸。可以用尺子丈量的,物理的英寸。

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

  但在CSS中pt的含义却非如此,例如我们指定一个字体是9pt,浏览器会以CSS规范解释,它等于:

  9 * 1/72 = 1/8 inch

  这是一个误解,因为我们的显示器被分割为了一个个的像素,单个像素只能有一种颜色(为了简化,这里暂不讨论次像素反锯齿技术),要在屏幕上显示,必须先把以pt为单位的长度转换为以像素为单位的长度,这个转换的媒介,就是dpi(事实上,这里的所谓的dpi,是操作系统和浏览器中使用的术语,即为PPI, pixels per inch,扫描仪、打印机、数码相机中的DPI是不同的)。

  例如,无论在哪个操作系统中,Firefox浏览器默认的dpi都是96,那么实际上:

  9pt = 9 * 1/72 * 96 = 12px

  所以,虽然pdi中的I和1pt等于1/72 inch中的inch,都不代表物理上的英寸,但这两个单位互相之间是相等的,也就在相乘中约掉了。

  那么,真实的物理长度怎么计算呢?请拿出一把尺子,丈量你的显示器的可见宽度 (我这里是 11.2992 英寸),除以横向分辨率 (我这里是 1024 像素),得到的就是每个像素的物理长度。

  现在我们可以回答这样一个问题,网页上 9pt 的字体究竟占用了多宽的空间?答案是:

  9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 厘米

  有兴趣的朋友可以自己测试一下。

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

来源:http://www.tulaoshi.com/n/20160219/1629985.html

延伸阅读
标签: 怀孕
母乳喂养之风迅速流行当今社会。为了不影响事业,同时还要保障宝宝有绿色安全的食物来源,越来越多妈妈选择背奶。但背奶是什么意思呢,下面就跟随小编一起来了解详情吧。 背奶是什么意思?“什么牛奶都不如妈妈的奶”,越来越多的年轻妈妈开始把专业的吸奶、储奶器具带到单位,利用工作间隙完成吸奶、冷藏、保存等一系列流程,晚上背回家给宝...
  一、长度单位 长度单位是Web页设计中最常用的一个单位。一个排列无序、杂乱无章的页面不可能给人们留下什么好的印象。于是,在设计的时候需要为元素的位置、尺寸精确地定义一些值,以使其达到预期的效果。 CSS给予人们精确控制网页的能力,这一点为人们津津乐道。它允许人们定义外观、尺寸、空间及其他的样式。但是,CSS所...
标签: Web开发
css优先级的四大原则: 原则一: 继承不如指定 如果某样式是继承来的永远不如具体指定的优先级高。 例子1: CODE: style type="text/css" !-- *{font-size:20px} .class3{ font-size: 12px; } -- /style span class="class3"我是多大字号?/span 运行结果:.class3{ font-size: 12px; } 例子2: CODE: style...
标签: 生活常识
pt999是什么意思   pt999是什么意思 pt999是什么意思?pt999是铂金,其含铂量高达999‰,因此也称之为千足铂。 铂金是一种天然的白色贵金属,只有铂金才可以称为白金,但不是所有的白色金属都是白金。因为市面上有一种k白金,其是k金,并非铂金。 pt999铂金是纯铂金,是含铂量或成色最高的铂金。其白色光泽...
标签: 营养价值
水果拥有很多的种类,每种水果也都有着它自己的特色,水果中含有的维生素非常的多,因此在不同的季节中,就要选择不同的水果,夏季西瓜成为了很多人的最爱,同时桑葚也让很多人非常的喜爱,桑椹是什么呢?桑葚也是水果的一种,它含有很高的营养价值,因此也受到了很多人的喜爱。 桑椹是什么 那对不知道桑椹是什么的人,就可以...

经验教程

758

收藏

68
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部