Px、em、rem、%、vw、wh、vh、vmin、vmax等單位的區別！
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【Px、em、rem、%、vw、wh、vh、vmin、vmax等單位的區別！ 】
1.背景介紹
隨著CSS的發展和版本的迭代，我們能能使用的標籤也隨之增多，有許多標籤雖然在結果上表現出來十分相似，
但如果不理解其內涵和意義，容易引起程式設計規範上的錯誤，
本次小課堂會分享文字格式、影象的文字註釋和替代以及連結的一些屬性，對他們進行區分學習
2.知識剖析
2.1、絕對單位: px，pt，cm，mm這些定值都是固定的，不會隨著螢幕的寬度改變而改變。
px：為畫素單位。它是顯示屏上顯示的每一個小點，為顯示的最小單位，。
in:英寸，絕對長度單位。
cm:釐米，絕對長度單位。
mm:毫米，絕對長度單位。
pt:point，大約1/72寸，絕對長度單位。
pc:pica，大約6pt，1/6寸，絕對長度單位。
相對單位：em，rem,%、em、rem、vw、wh、wmin、wmax相對於當前物件內文字的字型尺寸。如當前行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。
em：相對單位，基準點為父節點字型的大小，如果自身定義了font-size按自身來計算（瀏覽器預設字型是16px，則2em == 32px；），整個頁面內1em不是一個固定的值。em會繼承父級元素的字型大小。
rem：相對單位（root em，根em）。但相對的只是HTML根元素，相對根節點html的字型大小來計算。
百分比相對單位：vw、vh、vm、vmax、vmin、%。
vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個
%：百分比，它是一個更純粹的相對長度單位。它描述的是相對於父元素的百分比值。如50%，則為父元素的一半。
3.常見問題
em和rem有什麼區別？
4.解決方案
“em”是相對於其父元素來設定字型大小的，這樣就會存在一個問題，進行任何元素設定，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對於根元素。
作者：遠望的雲
連結：https://www.jianshu.com/p/b0b83d8149c2
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地