px em rem vh的使用

-絕對機關：px

-相對機關：rem,em,% ,vh,vw

px

像素，相對于螢幕的分辨率

em

參考父元素的font-size,具有繼承性的特點，逐層影響(最終的參考是浏覽器的字型大小或設定的字型大小)。浏覽器預設是16px

一層：1.4em=1.416px=22.4px

二層：1.2em=1.21.41.6px

rem

相對的隻有html根元素,可以避免字型大小逐層複合的連鎖反應

一層：1rem=16px

二層：2rem=216px

vh

相對于視口高度，1vh=浏覽器視口高度的1%，1vw=浏覽器視口寬度的1%

視口寬度：

在桌面端，指的是浏覽器的可視區域

移動端指的是布局視口

vmin:vh,vw中較小的一個

vmax:vh,vw中較大的一個

%

百分比，相對長度機關，相對于父元素的百分比

适用場景：

1.随着父容器或者整體頁面布局而改變的尺寸，如元素的寬度，高度設定