單位就是那個(gè)形容長(zhǎng)度大小的東西。比如身高180cm(厘米)，cm就是單位。
css 也不例外，要描述一個(gè)盒子的大小，就必須要用到單位。
css 單位根據(jù)其作用分為幾大類：絕對(duì)單位、相對(duì)單位、視口單位、角度單位、時(shí)間單位、網(wǎng)格單位、頻率單位、分辨率單位。
動(dòng)態(tài)計(jì)算單位
認(rèn)識(shí)單位之前，先認(rèn)識(shí)幾個(gè)動(dòng)態(tài)計(jì)算函數(shù)，這東東的用法可強(qiáng)大了，后續(xù)再介紹。
calc()
動(dòng)態(tài)計(jì)算值（如width: calc(100% - 20px)）
min()
取最小值（如width: min(100%, 500px)）
max()
取最大值（如width: max(50%, 300px)）
clamp()
限制在范圍（如font-size: clamp(1rem, 2.5vw, 2rem)）
絕對(duì)單位
絕對(duì)單位的大小固定不變，與屏幕或設(shè)備無(wú)關(guān)，適合精確控制。例如一個(gè)長(zhǎng)寬20像素的盒子，不管是在電腦上還是手機(jī)中，其大小就是20px。
需要注意系統(tǒng)縮放，分辨率2560x1440的筆記本電腦，如果縮放100%，其寬度還是2560像素；如果縮放150%，其寬度將變?yōu)?560÷1.5=1706.66。。
同一個(gè)20像素，在縮放100%和縮放150%肉眼看到的大小是不一樣的。
px（像素）
最常用單位，1px = 1屏幕像素（非物理像素），適合固定尺寸元素（邊框、圖標(biāo)）
cm（厘米）
實(shí)際物理尺寸（1cm ≈ 37.8px），多用于打印樣式
mm（毫米）
同厘米，但更精細(xì)（1cm = 10mm）
in（英寸）
1in = 2.54cm ≈ 96px
pt（點(diǎn)）
印刷單位，1pt = 1/72英寸 ≈ 1.33px
pc（派卡）
印刷單位，1pc = 12pt ≈ 16px
cm 、 mm 、 in 、 pt 、 pc 這些單位主要用于打印和其他需要精確尺寸的場(chǎng)合。
相對(duì)單位
相對(duì)單位的大小基于其他參考值（父元素、視口、字體大小等），適合響應(yīng)式設(shè)計(jì)。
相對(duì)單位必須要找一個(gè)老六，老六的大小就是他的標(biāo)準(zhǔn)。
em
相對(duì)于當(dāng)前元素的字體大小，1em等于當(dāng)前元素的字體大小。如果父元素有font-size屬性，則子元素的em值是根據(jù)父元素的字體大小計(jì)算的。適用于創(chuàng)建可以相對(duì)于用戶設(shè)定的字體大小縮放的布局。
rem
相對(duì)于根元素（html元素）的字體大小，1rem等于根元素的字體大小。使用rem單位可以方便地進(jìn)行響應(yīng)式布局，同時(shí)避免em單位的嵌套導(dǎo)致的復(fù)雜計(jì)算問(wèn)題。
%
相對(duì)于父元素的尺寸，例如width: 50%表示元素寬度為父元素寬度的50%。
ch
相對(duì)于當(dāng)前元素的字體寬度，1ch = 當(dāng)前字體中 "0" 字符的寬度，適合文本排版對(duì)齊。
ex
相對(duì)于當(dāng)前字體的x高度，1ex等于當(dāng)前字體的x高度，使用較少。
視口單位
視口單位就是相對(duì)于瀏覽器窗口的寬度或高度，它與屏幕或設(shè)備無(wú)關(guān)，只與瀏覽器的可視窗口有關(guān)。
vw
視口寬度的1%（50vw = 視口寬度的一半）。
vh
視口高度的1%。
vmin
取視口寬高中較小的1%（如豎屏手機(jī)中相當(dāng)于vw）。
vmax
取視口寬高中較大的1%。
svh/lvh
區(qū)分短視口（svh）和完整視口（lvh），解決移動(dòng)端瀏覽器地址欄遮擋問(wèn)題。
角度單位
對(duì)頭，就是那個(gè)三角函數(shù)中的角度，弧度。
deg（度數(shù)）
表示角度，用于控制旋轉(zhuǎn)和變形。
rad（弧度）
表示弧度，用于控制旋轉(zhuǎn)和變形。
grad（梯度）
表示梯度，用于控制旋轉(zhuǎn)和變形。
turn（圈數(shù)）
表示旋轉(zhuǎn)的圈數(shù)，用于控制旋轉(zhuǎn)和變形。
時(shí)間單位
多用于控制持續(xù)時(shí)間，如動(dòng)畫。
網(wǎng)格單位
用于網(wǎng)格布局，就是 Grid。
fr
表示網(wǎng)格容器剩余空間的一部分，用于網(wǎng)格布局。
頻率單位
嘿...這個(gè)真不常見(jiàn)。
分辨率單位
用于打印媒體查詢，沒(méi)見(jiàn)過(guò)~~
dpi（每英寸點(diǎn)數(shù)）
表示每英寸的點(diǎn)數(shù)，用于控制圖片大小和清晰度。
dpcm（每厘米點(diǎn)數(shù)）
表示每厘米的點(diǎn)數(shù)，用于控制圖片大小和清晰度。
dppx（每像素點(diǎn)數(shù)）
表示每像素的點(diǎn)數(shù)，用于控制圖片大小和清晰度。
常用單位
這么多單位，可不是每個(gè)都會(huì)使用的，一般常用的也就幾個(gè)，如下：
px
邊框、固定尺寸圖標(biāo)、微小間距。
%
容器寬度、高度（相對(duì)于父元素）。
rem
字體大小、間距、布局尺寸。
vw/vh
全屏布局、響應(yīng)式字體/元素。
fr
CSS Grid 布局中的彈性列寬。
calc()
動(dòng)態(tài)計(jì)算尺寸（如 calc(100% - 20px)。
clamp()
流體響應(yīng)式設(shè)計(jì)（如字體、容器尺寸）。
總結(jié)
核心掌握：px、%、rem、vw/vh、fr、calc()、min()、max()、clamp()。
了解即可：em、vmin/vmax、ch。
特殊場(chǎng)景備用：svh/lvh、ex。
無(wú)需深究：cm、mm、in、pt、pc。
轉(zhuǎn)自https://www.cnblogs.com/linx/p/18805404
400 186 1886
