免費(fèi)AI編程助手
談?wù)凜SS3的長(zhǎng)度單位（vh、vw、rem）
- vw、vh、vmin、vmax
- rem與em
vw、vmin、vmax這四個(gè)單位都是基于視口的，含義如下：1/100。1/100。vmax是相對(duì)于視口的高度和寬度兩者之間的最小值或最大值。根元素（html）的字體大小（font-size）來(lái)計(jì)算的長(zhǎng)度單位。html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */
body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */
根元素字體大小小于默認(rèn)最小字體大小，那么就會(huì)以默認(rèn)最小字體大小設(shè)置根元素。比如：在chrome中，最小字體大小是12px，如果你設(shè)置的字體大小小于12px，還是會(huì)以12px設(shè)置：html{font-size: 62.5%} /* 16px * 62.5% = 10px */
body{font-size: 1.4rem;} /* 1.4rem * 12px = 16.8px */
html{font-size: 20px;}
body{font-size: 0.7rem;} /* 0.7 * 20px = 14px */
rem，我們還會(huì)想到em，兩者都是相對(duì)單位，由瀏覽器轉(zhuǎn)換為像素值，那兩者有什么區(qū)別？使用哪個(gè)更好呢？em的區(qū)別：- rem是相對(duì)于根元素（html）的字體大小，而em是相對(duì)于其父元素的字體大小
- em最多取到小數(shù)點(diǎn)的后三位
<style>
html{ font-size: 20px; }
body{
font-size: 1.4rem; /* 1rem = 28px */
padding: 0.7rem; /* 0.7rem = 14px */
}
div{
padding: 1em; /* 1em = 28px */
}
span{
font-size:1rem; /* 1rem = 20px */
padding: 0.9em; /* 1em = 18px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
20px，body的字體大小設(shè)為1rem，那么轉(zhuǎn)換為像素就是28px（20 × 1.4），接著我們又將div的padding設(shè)為1em，由于其基于父元素，所以轉(zhuǎn)換為像素是28px ( 28 × 1），然后我們又將span的字體大小設(shè)為1rem，也就是20px，由于其自身設(shè)置了字體大小，所以padding設(shè)為1em，轉(zhuǎn)換為像素是20px(20 × 1），而不是乘以其父元素的字體大小28px(28 × 1）。rem，因?yàn)?code>em使用不當(dāng)?shù)脑挘?dāng)出現(xiàn)多層繼承時(shí)，會(huì)很容易混淆，比如：<style>
html{ font-size: 20px; }
body{
font-size: 0.9em; /* 1rem = 18px */
}
div{
font-size: 0.8em; /* 1em = 14.4px */
}
span{
font-size: 0.9em; /* 1rem = 12.96px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
em時(shí)，如果其祖先元素都是用了em，那么就會(huì)像上面一樣，body繼承其父元素html的字體大小，而div又繼承其父元素body的字體大小，而span又繼承其父元素div的字體大小，最終span的字體大小最終是12.96px（20 × 0.9 ×0.8 × 0.9）。- 如果這個(gè)屬性根據(jù)它的font-size進(jìn)行測(cè)量，則使用
em - 其他的一切事物屬性均使用rem.
- 多列布局，一般使用百分比%
更多建議：