css中的尺寸和單位

前言

本文主要介紹css的尺寸和單位，專門查了mdn, 加上本身的一些理解。本文參考mdn

<length>類型

length表示距離尺寸的一種css數據格式,它由數值+單位組成，若是數值爲0，單位能夠省略。好比width, height, margin, font-size,text-shadow等屬性, css的length類型分爲絕對單位和相對單位

相對單位

相對單位表明以其餘距離爲尺寸的一種單位，包括em，rem，ex，lh，rlh。這幾個單位沒什麼好說的，不知道本身查文檔。我主要來講下和視口相關的幾個相對單位的使用：vw，vh，vi，vb，vmax，vmin
提出中文mdn文檔的一個錯誤： 當視口的大小被修改（經過更改桌面計算機窗口大小或旋轉手機或平板設備的方向）時，只有基於Gecko的瀏覽器才動態更新視口值，只有基於Gecko的瀏覽器才能動態更新視口值，能夠測試一下，說法並不正確:
經測試在chrome, IE7以上都是正常的，中文文檔誤人:-D

window.onresize = function () {
        console.log(document.documentElement.clientWidth || document.body.clientWidth);
    }

指出中文mdn文檔的另一個錯誤若是html和body設置了overflow:auto，滾動條佔據的空間不會從視口中減去（譯者注：大概就是說會算在視口裏，視口大小是包括滾動條的），但當設置爲overflow:scroll時，滾動條佔據的空間反而會從視口中減去（譯者注：大概就是此時視口大小不包括滾動條）。, 明顯又是一個誤導:-D。英文文檔裏沒有這兩點，英文很差的話，就中英文一塊看吧

1. vi和vb，vi是沿着包含塊的內聯軸方向尺寸的1%，vb是沿着包含塊的塊軸方向尺寸的1%
   對這兩個單位的兼容性比較差，基本在全部瀏覽器上都不兼容。可是這兩個單位引出了兩個比較有趣的概念包含塊和塊軸，內聯軸
2. vh和vw，視口高度的1%和視口寬度的1%。可用來作可伸縮佈局，可是兼容性沒有rem好。因此目前仍是rem佈局居多，vh和vw看到網易新聞有用到vw設置字體大小，不知道目的何在，不過vw確實能夠用來作移動端佈局
3. vmin，vmax, 視口寬度和高度之間的最小值的1%，視口寬度和高度之間的最大值的1%

絕對單位

絕對單位包括px，pt，in, mm, cm等。絕對單位這種翻譯容易形成誤解。好比《css編程指南》中對於絕對單位的描述：絕對單位其實也是一種相對單位，😄，是否是有點懵逼！！！若是你明白設備像素和設備獨立像素的概念，就會以爲這也能說通。
簡言之，css樣式中設置的像素都是設備獨立像素。公式：dpr = 設備像素 / 設備獨立像素。咱們知道設計稿給出的通常是設備像素。那麼設計稿到css樣式：設備獨立像素 = 設備像素 ／ dpr，設備獨立像素用於咱們的css佈局中，so easy，前端入門知識。出兩個面試題。

• 高分辨率屏幕下實現1px邊框
• 同一臺設備上1in, 96px, 72pt分別設置三行字體，哪行字體顯示的最大？

有的設計師的設計稿給出的就是pt爲單位的。大部分設計師都是給出設備像素的設計稿，須要咱們本身換算成css，畢竟咱們是專業的，ue不懂這些東西。
好啦，進入正題，從mdn中抄了這麼一段描述：

• 1in 老是（等於）96px
• 3pt 老是（等於）4px
• 25.4mm 老是（等於）96px

咱們常常看到有的博客說:高分辨率的顯示器，ppi(pixel per inch)更大，但是上面又說1in = 96px老是成立的，跟分辨率無關，哈哈，是否是衝突？no！ppi的第一個p指的是設備像素，1in = 96px = 72pt = 25.4mm這個始終成立的，px指的是設備獨立像素。因此呢，第二個問題的答案：三行字體在同一臺設備上同樣大小。

總結

總結了css中尺寸和長度的單位。相對單位和絕對單位。講相對單位的時候引出了‘包含塊’的概念，對於絕對單位，引出了絕對單位間的換算關係，設備像素和設備獨立像素的概念。因此呢，相對單位最終仍是要轉換爲絕對單位px，而後在網頁中進行佈局。px自己只是設備獨立像素，它也是一個相對單位。那麼我能夠說css中全部的長度單位都是相對單位麼？以前看到有人這樣理解。時間倉促，本身的理解也不必定正確，歡迎留言評論，指出錯誤。謝謝！