資訊專欄INFORMATION COLUMN
摘要：有的是日常生活中使用的單位，比如厘米和英寸有的是印刷行業使用的單位，比如和有的是專門為發明的單位，比如。但是，由于目前低端打印機的每英寸點數為，而高端屏幕的每英寸點數為，因此所謂的高分辨率可能介于兩者之間。。
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。這些單位在目前大部分瀏覽器上都有支持。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117246.html
摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼這一節，請跟隨筆者聊一聊，網頁的分段傳輸與渲染，用一些非常規手段優化我們的網站響應速度。可以處理完一塊就返回一塊，讓瀏覽器盡早的接收到，可以先行渲染。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/...
摘要：聊一聊設計模式在組件開發中的應用回想一下在你的前端生涯中是否遇到過以下問題在寫的時候經常會在命名時絞盡腦汁在團隊多人開發中出現命名沖突在進行組件化開發時如何規范書寫什么是是團隊提出的一種的命名方式，通過這種命名方式可以很好地解決上面遇到的問 聊一聊BEM設計模式在Vue組件開發中的應用 回想一下在你的前端生涯中是否遇到過以下問題1.在寫css的時候經常會在命名class時絞盡腦汁2.在...
摘要：聊一聊設計模式在組件開發中的應用回想一下在你的前端生涯中是否遇到過以下問題在寫的時候經常會在命名時絞盡腦汁在團隊多人開發中出現命名沖突在進行組件化開發時如何規范書寫什么是是團隊提出的一種的命名方式，通過這種命名方式可以很好地解決上面遇到的問 聊一聊BEM設計模式在Vue組件開發中的應用 回想一下在你的前端生涯中是否遇到過以下問題1.在寫css的時候經常會在命名class時絞盡腦汁2.在...
摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼什么是功能統計作為一名開發，我們的產品發布出去之后，無論是產品還是運營，其實都是想及時了解產品對用戶產生的影響的。下一章，我們將繼續聊聊速度統計。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/bl...
閱讀 1389·2021-09-22 10:02
閱讀 1901·2021-09-08 09:35
閱讀 4061·2021-08-12 13:29
閱讀 2608·2019-08-30 15:55
閱讀 2265·2019-08-30 15:53
閱讀 2301·2019-08-29 17:13
閱讀 2761·2019-08-29 16:31
閱讀 2954·2019-08-29 12:24
