px、em、rem、%、vw、wh、vm等單位有什麼區別？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【px、em、rem、%、vw、wh、vm等單位有什麼區別？】
 
1.背景介紹

傳統的項目開發中，咱們只會用到px、%、em這幾個單位，它能夠適用於大部分的項目開發，而且擁有比較良好的兼容性。可是你知道嗎？從css3開始，瀏覽器對邏輯單位的支持又提高到了另一個境界，增長了rem、vh、vw、vm等一些新的長度單位，咱們能夠利用這些新的單位開發出比較良好的響應式頁面，隨之覆蓋多種不一樣分辨率的終端，包括移動設備等。如今讓咱們來看下這些長度單位有什麼區別。
2.知識剖析

一、px

px就是pixel的縮寫，意爲像素。px就是一張圖片最小的一個點，一張位圖就是千千萬萬的這樣的點構成的，好比經常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。

兼容性：

二、em

參考物是父元素的font-size，具備繼承的特色。若是自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。

兼容性：

 

三、rem

css3新單位，相對於根元素html（網頁）的font-size，不會像em那樣，依賴於父元素的字體大小，而形成混亂。

兼容性：

 

四、%

通常寬泛的講是相對於父元素，可是並非十分準確。

一、對於普通定位元素就是咱們理解的父元素

二、對於position: absolute;的元素是相對於已定位的父元素

三、對於position: fixed;的元素是相對於ViewPort（可視窗口）

兼容性：

 

三、vw

css3新單位，viewpoint width的縮寫，視窗寬度，1vw等於視窗寬度的1%。

舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。

兼容性：

 

四、vh

css3新單位，viewpoint height的縮寫，視窗高度，1vh等於視窗高度的1%。

舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。

兼容性：

 

四、vm

css3新單位，相對於視口的寬度或高度中較小的那個。其中最小的那個被均分爲100單位的vm

舉個例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。

因爲如今vm的兼容性較差，這裏就不作展現了。

你隨便轉，比例變了算我輸
3.常見問題

vh vw vm實際應用場景？
4.解決方案

vh vw是不包含頁面滾動條的視窗寬度(innerwidth)，%包含了滾動條的寬度在裏面了(outerwidth)。

通常的狀況下%就能夠知足大部分自適應設計的需求，能夠用height：100vh作一個高度佔滿屏幕的自適應，沒有滾動條。

用vw，vh設定的大小隻和視窗大小有關，因此用來開發多種屏幕設備的應用用這個單位仍是挺合適的。
5.編碼實戰

點擊這裏
6.擴展思考

css還有哪些長度單位？

in:寸

cm:釐米

mm:毫米

t:point，大約1/72寸

pc:pica，大約6pt，1/6寸

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
7.參考文獻

參考一：你知道這7個css單位麼

參考二：CSS長度單位值測試實例頁面
---------------------
做者：IT修真院
來源：CSDN
原文：https://blog.csdn.net/jnshu_it/article/details/77161717
版權聲明：本文爲博主原創文章，轉載請附上博文連接！