CSS單位學習

標籤：com   width   解決   www   html   最小   inf   比例   相對   

1、em單位被定義為當前字型大小。例如，如果你在body元素上設定一個字型大小，那麼在body元素內的任何子項目的em值都等於這個字型大小。

在body內嵌套三層div，給最外層的div通過class屬性設定字型大小為16px；再給所有的div元素設定字型大小為2em。

：

2、rem中的"r"代表"root"；這等同於font-size基於根項目進行設定；在大多數情況下根項目為html元素。rem實現的是基於唯一標準進行比例縮放。

：

也可以按照唯一標準對寬度、高度進行比例設定：width:70rem；

3、vh和vw

響應式網頁設計技術很大程度上依賴於比例規則。然而，CSS比例不總是每個問題的最佳解決方案。CSS寬度是相對於最近的包含父元素。如果你想使用顯示視窗的寬度或高度而不是父元素的寬度將會怎麼樣？這正是vh和vw單位所提供的。

用vw來設定一個字型大小。這個大小將會隨著瀏覽器的寬度按比例縮放。

vh等於viewport高度的1/100.例如，如果瀏覽器的高是900px,1vh求得的值為9px。同理，如果顯示視窗寬度為750px,1vw求得的值為7.5px。

div{
  font-size:25vw;
}
4、vmin 和 vmax

vh和vm總是與視口的高度和寬度有關，與之不同的，vmin和vmax是與這次寬度和高度的最大值或最小值有關，取決於哪個更大和更小。例如，如果瀏覽器設定為1100px寬、700px高，1vmin會是7px,1vmax為11px。然而，如果寬度設定為800px，高度設定為1080px，1vmin將會等於8px而1vmax將會是10.8px。

 

 

著作權歸作者所有。
商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html ? w3cplus.com

CSS單位學習