再看CSS長度單位使用，作到成竹在胸

前言

在平常的開發過程當中，對長度單位的使用較爲混亂。本瓜稱之爲「黑盒長度單位使用」。

涉及到網站需同時兼容 PC 和移動端狀況更甚：px、百分比、em、rem、vw etc.

要歷經樣式修改和功能需求修改的反反覆覆，若是沒有對CSS 長度單位作到胸有成竹，那麼隨着時間的增加，設置將愈來愈亂，要了老命嘞~

絕對單位和相對單位

CSS有多種表示長度的不一樣單位。

許多CSS屬性有「length」值，例：width, margin, padding, font-size 等。

長度是一個數字，後跟一個長度單位，例如10px，2em等。

長度單位有兩種：絕對單位和相對單位。

絕對單位

Absolute Lengths

W3C 對 Absolute Lengths 的解釋：

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

絕對長度單位是固定的，用任一一個單位的長度表示的大小將是固定的一個大小值。

Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

不建議在屏幕上使用絕對長度單位，由於屏幕尺寸變化很大。可是，若是已知輸出媒介，則可使用它們，例如用於打印的佈局。

絕對長度單位有如下這些：

Unit	Description
cm	centimeters 釐米
mm	millimeters 毫米
in	inches (1in = 96px = 2.54cm) 英尺
px *	pixels (1px = 1/96th of 1in) 物理像素（設備像素）
pt	points (1pt = 1/72 of 1in) 邏輯像素
pc	picas (1pc = 12 pt) 派卡：印刷行業使用的長度單位

• 像素（px）在不一樣的設備有不一樣表現。對於低 dpi 的設備，1px 是顯示器的一個設備像素（點）。對於打印機或高分辨率 屏幕 1 像素表示多個設備像素。

相對單位

W3C 對 Relative length 的解釋：

Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.

相對長度單位指定相對於另外一個長度屬性的長度。相對長度單位在不一樣渲染介質之間縮放更好。

相對長度單位有如下這些：

Unit	Description
em	Relative to the font-size of the element (2em means 2 times the size of the current font) 相對於元素的字體大小
ex	Relative to the x-height of the current font (rarely used) 相對於當前字體的 x 高度，不多用到
ch	Relative to the width of the "0" (zero) 相對於「0」的寬度
rem	Relative to font-size of the root element 相對於根元素的字體大小
vw	Relative to 1% of the width of the viewport* 相對於視口寬度的1%
vh	Relative to 1% of the height of the viewport* 相對於視口高度的1%
vmin	Relative to 1% of viewport's* smaller dimension 當前vw和vh中較小的值的1%
vmax	Relative to 1% of viewport's* larger dimension 當前vw和vh中較大的值的1%
%	Relative to the parent element 相對於父元素

你真的瞭解 px 嗎

天然界標準長度單位

天天基本上都和 px 打交道。那請問 px 有多長？

實際上，px 不是天然界的絕對長度單位。px 的長度大小在不一樣的設備分辨下是不一樣的，從這個意義上看 px 也是相對的。

可是如 pt 單位，大小爲1/72英寸，是一個天然界標準的長度單位。

一樣釐米、毫米、英寸都是天然界標準的長度單位。

來看如下兩種狀況，px 和天然界標準長度單位（這裏是英寸）的關係以及清晰度的問題：

1. 在相同的屏幕寬高下：如：15.6英寸（396.24毫米）的筆記本電腦：

類型	每單位	像素點個數
1920*xxx的分辨率	1毫米	1920/396.24=4.8個px
1366*xxx的分辨率	1毫米	1366/396.24=3.4個px

結論：前者更清晰

2. 在相同的像素點下：如：1366*xxx的分辨率：

類型	每單位	長度
ipad pro(寬度305.7mm)	1px	305.7/1366 = 0.22(毫米)
筆記本(396.24mm)	1px	396.24/1366 = 0.29(毫米)

結論：同樣清晰（ipad pro 用更小的寬度裝了一樣多的像素點）

肉眼看得清晰與否，跟屏幕實際尺寸的大小沒有任何關係，而是跟單位長度的像素點有決定性的關係。 因此購買電腦時，15寸必定比13寸清晰是錯誤的。

在同等的天然界標準長度下的包含像素點越多，則越清晰。

設備像素和css像素

須要知道的是：咱們一般編碼的 px 指的是 css 像素而非設備像素：

• 設備像素（device pixels）：是指與硬件設備直接相關的像素，是真實的屏幕設備中的像素點。好比說，一個電腦顯示器的參數中，最佳分辨率是1920x1080，那麼指的就是這個顯示器在屏幕上用於顯示的實際像素點，也就是設備像素。

• css像素（css pixels）：css像素是指網頁佈局和樣式定義所使用的像素，也就是說，css代碼中的px，對應的就是css像素。

轉換關係：在100%縮放比例下，1個css像素等於1個設備像素。

dpr

爲何移動端設計稿一般是 750px ?

這裏所說的750px並非絕對的，750px是iphone6的物理像素，也叫屏幕分辨率。也就是說這個手機被出廠造出來的時候，這個屏幕上有多少個像素點，他的物理像素就是多少；

可是咱們在代碼裏寫 width:375px，就能充滿整個寬度。是由於 iphone6 的css像素（邏輯像素）是 375px。

dpr=物理像素/邏輯像素，iphone6 的dpr爲2。

rem 不會是配角

rem 是毋庸置疑的主角，從它一出現，就註定不平凡，是實際開發和麪試中出現的常客。

衆所周知，rem 是相對根元素的單位，而 em 是相對父級元素的，前者減小了層級關係的換算，使計算更準確，方便咱們使用。

具體如何設置呢？這裏提供三種方法，按需取用。原理一致，一通百通。不懂原理，只是爲了用而用，Duck 沒必要。

1、625法

一般狀況下：由於各瀏覽器默認字體字號爲 16px，即 16px 至關於 1rem ，設置以下：

html, body {
    font-size: 16px; /*default font-size equal 1 rem*/
}
h1 {
    font-size: 1rem; /*16px * 1 = 16px*/
}
h2 {
    font-size: .8rem; /*16px * 0.8 = 12.8px*/
}
複製代碼

可是顯然，這樣設置會形成換算的麻煩，由於要除以16。如何使得 1rem = 10px 呢？ 咱們能夠定義 10px / 16px = 0.625 = 62.5% ，即瀏覽器的默認字體爲 16px * 62.5% = 10px。

設置以下：

html, body {
    font-size: 62.5%; /* 10px / 16px = 62.5% 即 font-size 是 10px 至關於 1rem */
}
h1 {
    font-size: 1rem; /*10px * 1 = 10px*/
}
h2 {
    font-size: 1.2rem; /*10px * 1.2 = 12px*/
}
h2 {
    font-size: 1.4rem; /*10px * 1.4 = 14px*/
}
複製代碼

以後再媒體查詢設置每一個屏幕大小的根的 font-size 百分比，頁面會根據設置的根 font-size 進行適配。

html{
	font-size: (clientWidth /  375) * 62.5%
}
複製代碼

優：有必定適用性，換算也較爲簡單。

劣：有兼容性問題，對不一樣手機適配不是很是精準；須要設置多個媒體查詢來適應不一樣手機，單某款手機尺寸不在設置範圍以內，會致使沒法適配。

上述方法是一般解決方案，適用大多數狀況，但仍有兼容性狀況須要考慮。

如：chrome 強制字體最小值爲 12px，低於 12px 按 12px 處理，那上面的 1rem=10px 就變成1rem=12px，就會出現誤差。

如何解決？十倍擴大百分比的設置便可。

設置應以下：

html, body {
    font-size: 625%; // 使得1rem =100px，減小誤差狀況的出現
}
複製代碼

2、基準值法（考點）

假設設計師給的稿是 750 ，基於 ip6（dpr 爲 2）。 則能夠設置基準值爲 100; 即 1rem=100px。那麼總體屏幕就是 7.5 rem。

css換算和這個基準值有關；頁面動態font-size值 = 屏幕寬度 / 設計稿 rem 寬度

注：這裏要考慮 dpr 這個變量，要先除掉。

// iphone6: 寬度爲 375 px，公式：750/2/7.5=50

html{font-size:50px}

// iphone5:寬度爲 320 px，公式：750/2/7.5=42.6667
html{font-size:42.6667px}
複製代碼

優：經過動態根font-size來作適配，基本無兼容性問題，適配較爲精準，換算簡便。

劣：無viewport縮放，且針對iPhone的Retina屏沒有作適配，致使對一些手機的適配不是很到位。

3、flexible 法（推薦）

這是手淘解決方案amfe/lib-flexible

拿到設計稿除以10，獲得font-size值。

假設拿到的設計稿也是750，Flexible會把設計稿分爲10份，能夠理解爲整個屏幕就是 10 rem，即1rem=75px，因此根的font-size=75px。

引入 flexible.js

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>
複製代碼

頁面不用再設定 。Flexible會自動設定每一個屏幕寬度的根font-size、動態viewport、針對Retina屏作的dpr。

優：經過動態根font-size、viewpor、dpr來作適配，無兼容性問題，適配精準（動態計算 viewport 和針對 iphone 手機的 dpr 縮放調整，使得頁面適配更加精確）。

劣：須要根據設計稿進行基準值換算，在不使用sublime text編輯器插件開發時，單位計算複雜。

小結

舉例來講，移動端一般給的設計稿是750px，以 iphone6 爲基準，iphone 6是 375px 乘以 2，這個 2 是dpr，也就是咱們一般說的 2 倍屏（物理像素/css像素）。咱們設定設計稿寬度爲X rem,再倒推根元素設置的 font-size 應該是多大便可，而後根據不一樣的設備設置等比的根的 font-size。flexible.js 至關於幫你作了更詳細的換算設定。

參考

• w3schools_css_units
• the-lengths-of-css