摘要：有的是日常生活中使用的单位，比如厘米和英寸有的是印刷行业使用的单位，比如和有的是专门为发明的单位，比如。但是，由于目前低端打印机的每英寸点数为，而高端屏幕的每英寸点数为，因此所谓的高分辨率可能介于两者之间。。
CSS中有很多属性可以接受长度值，比如： width, height, margin, padding, border-width, font-size, text-shadow。因为使用场景多，因此CSS也提供了许多长度单位。有的是日常生活中使用的单位，比如：厘米（cm）和英寸（in）；有的是印刷行业使用的单位，比如：point（pt）和pica（pc）；有的是专门为CSS发明的单位，比如：px。
使用场景那么这些属性和单位怎么配合使用呢？特定的属性需要使用特定的单位吗？其实并非如此，单位和属性无关，同一个属性任何单位都适用，何时使用何种单位是没有限制的，如果属性接受以px为单位的值（比如：margin: 5px），那么它也可以接受英寸或厘米（margin: 1.2in; margin: 0.5cm）为单位的值，反之亦然。
单位虽然和属性无关，但是和输出的媒介有一定关系，比如输出到是屏幕还是纸张。在屏幕上显示和在纸张上面打印推荐使用的单位是不一样的。下表给出了推荐的使用方法：
| 输出媒介 | 推荐 | 偶尔使用 | 不推荐 |
|---|---|---|---|
| 屏幕 | em, px, % | ex | pt, cm, mm, in, pc |
| 打印 | em, cm, mm, in, pt, pc, % | px, ex |
除了和输出媒介的关系，这些单位可以从长度值的计算方式区分为绝对单位和相对单位。
绝对单位绝对单位（px，cm， mm，in，Q，pt和pc）意味着以此为单位的长度值与其代表的物理长度相等，比如width: 1cm即与现实世界中的1cm长度相等，也意味着绝对单位在所有的媒介上的显示效果是一致的。但这是理想情况，受显示器和不同浏览器CSS实现的差异，在很多设备上绝对单位显示的并不精确。因为px和in的关系为1in=96px， 在低分辨率设备上，1px为1像素（pixel，也是px名称的由来）长度，而低分辨率的屏幕上1px往往大于1/96in，所以从px计算得到的其他绝对单位值都不准确。而在高分辨率设备上（如现在的高清屏和打印机）绝对单位显示得更精确。由于以上原因，绝对单位更多的是在打印时使用。
曾经，CSS要求在计算机屏幕上正确显示绝对单位。但是由于大部分厂商并不能实现这一要求，所以CSS在2011年放弃了这一要求。目前，绝对单位仅在打印和高分辨率设备上正常工作。CSS没有明确定义“高分辨率”的含义。但是，由于目前低端打印机的每英寸点数为300 dpi，而高端屏幕的每英寸点数为200 dpi，因此所谓的“高分辨率”可能介于两者之间。。
下面贴出绝对单位直接的换算公式：
1in = 2.54cm = 25.4mm = 72pt = 6pc = 96pxpx
作为CSS中最常用的单位，关于px还是有必要多说两句的。px的特点可以归纳如下：
在低分辨率设备上，1px = 1像素；
在高分辨率设备上，1px = 1/96in，1px不一定等于1像素（比如4.7英寸的iphone上 1px=2像素）；
对于图片显示，1px = 1图片像素，比如：一个600x400分辨率的照片的的CSS宽高即为600px和400px（在4.7英寸iphone上要用1200x800个像素点显示）；
相对单位相对单位意味着长度值是根据其他长度计算得出的。相对单位又可以分为基于字体（font based）和基于视窗（viewport based）的：
Font Based em, ex首先说说em和ex，em代表元素的当前字体大小，如果元素的font-size为2cm，那么1em即表示2cm。em可以用于控制尺寸，比如margin: 1em; text-indent:1.5em，此时这些尺寸和元素字体大小相关，因此在大屏幕上（字体尺寸较大）和小屏幕上（字体尺寸较小）会等比缩放，因此em可以用于响应式的设计。如果em直接用于font-size属性，如font-size: 2em，则em表示为父元素字体的大小。
ex很少被使用，ex表现的大小与字体的x-height相关。x-height大致等于字体中小写字母（例如a，c，m或o）的高度。相同font-size的不同字体的x-height可能会有很大的差别，所以使用ex产生的效果存在很大的不确定性。
remCSS在2013年创造出了一个新的单位rem，rem表示的是根元素（html元素的）字体大小，在每个元素里面em都可能不一样，但是rem都是一致的。因为这一特性，rem现在被更广泛的应用于响应式设计。
chch用的表较少，是CSS3中新加入的单位，表示当前字体中的 "0" (零、unicode 字符 U+0030) 的宽度。
Viewport Based vw，wh，vmin，vmax都是CSS3中新加入的单位。vw，vh可以根据视窗大小调整字体大小。vw是视窗的1/100的宽度，而vh是视窗1/100的高度。此外还有vmin，它指的是vw以及vh间较小的那个，与之相对的还有vmax。这些单位在目前大部分浏览器上都有支持。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117246.html
摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码这一节，请跟随笔者聊一聊，网页的分段传输与渲染，用一些非常规手段优化我们的网站响应速度。可以处理完一块就返回一块，让浏览器尽早的接收到，可以先行渲染。 欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/...
摘要：聊一聊设计模式在组件开发中的应用回想一下在你的前端生涯中是否遇到过以下问题在写的时候经常会在命名时绞尽脑汁在团队多人开发中出现命名冲突在进行组件化开发时如何规范书写什么是是团队提出的一种的命名方式，通过这种命名方式可以很好地解决上面遇到的问 聊一聊BEM设计模式在Vue组件开发中的应用 回想一下在你的前端生涯中是否遇到过以下问题1.在写css的时候经常会在命名class时绞尽脑汁2.在...
摘要：聊一聊设计模式在组件开发中的应用回想一下在你的前端生涯中是否遇到过以下问题在写的时候经常会在命名时绞尽脑汁在团队多人开发中出现命名冲突在进行组件化开发时如何规范书写什么是是团队提出的一种的命名方式，通过这种命名方式可以很好地解决上面遇到的问 聊一聊BEM设计模式在Vue组件开发中的应用 回想一下在你的前端生涯中是否遇到过以下问题1.在写css的时候经常会在命名class时绞尽脑汁2.在...
摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码什么是功能统计作为一名开发，我们的产品发布出去之后，无论是产品还是运营，其实都是想及时了解产品对用户产生的影响的。下一章，我们将继续聊聊速度统计。 欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/bl...
阅读 1360·2021-09-22 10:02
阅读 1796·2021-09-08 09:35
阅读 3983·2021-08-12 13:29
阅读 2568·2019-08-30 15:55
阅读 2240·2019-08-30 15:53
阅读 2272·2019-08-29 17:13
阅读 2700·2019-08-29 16:31
阅读 2929·2019-08-29 12:24
