html標(biāo)簽的解釋
html
font-size的解釋
1兆龙、瀏覽器的一般的font-size 默認(rèn)都是16px
2坟冲、font-size 有多種類型的值
/* <absolute-size>，絕對(duì)大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
此類為用戶默認(rèn)字體大惺潘（medium即16px）
/* <relative-size>技竟，相對(duì)大小值 */
font-size: larger;
font-size: smaller;
此類是對(duì)比父元素的fot-size 進(jìn)行大小修改
/* <length>局劲，長(zhǎng)度值 */
font-size: 12px;
font-size: 0.8em;
此類比較常用 em也是相對(duì)于父元素的大小進(jìn)行倍數(shù)的放大和縮小
/* <percentage>勺拣，百分比值 */
font-size: 80%;
此類相對(duì)于父元素的大小
當(dāng)我設(shè)置rem時(shí)，我設(shè)置的是什么
設(shè)置 html （文檔根元素）的font-size大小來(lái)實(shí)現(xiàn)其他元素的相對(duì)大小
1. html {
font-size: 20px;
}
div{
width: 10rem;
}
當(dāng)一個(gè)div 設(shè)置 10rem的值的時(shí)候容握，其大小是相對(duì)于html的20px的20倍宣脉，也就是400px。
瀏覽器的最小的font-size是12px剔氏，那只能設(shè)置font-size為12么
先看一個(gè)例子塑猖，具體代碼和效果如下
font-size大小設(shè)置
<div class="ceshi">
這是一段測(cè)試的文字
</div>
<div class="rem">
這是一段測(cè)試rem的文字
</div>
html {
font-size: 8px;
}
.ceshi {
border: 1px solid red;
width: 200px;
height: 200px;
color: blueviolet;
font-size: 12px;
margin-right: 10px;
float: left;
}
.rem{
border: 1px solid red;
width: 20rem;
height: 20rem;
font-size: 1rem; 設(shè)置為1rem 也就是8px 最終的值還是12px
color: blueviolet;
float: left;
}
結(jié)論： font-size 可以設(shè)置的比12px 小，并且對(duì)于rem還是有效果的谈跛，在計(jì)算相對(duì)大小的時(shí)候還是以設(shè)置的值的大小進(jìn)行換算羊苟，可以看出長(zhǎng)度和高度的大小就是按照此規(guī)律，但是對(duì)于字號(hào)已經(jīng)達(dá)到最小值的12px的字體感憾，則依然還是12px的大小顯示
font-size 設(shè)置的百分比是對(duì)于父級(jí)元素的比例 我設(shè)置html 的font-size 62.5% 的時(shí)候相對(duì)于的父級(jí)是什么
1蜡励、html即文檔的根元素 當(dāng)設(shè)置 %比的值的時(shí)候，相對(duì)于的父級(jí)就是系統(tǒng)默認(rèn)值，也是就是 16px
2凉倚、系統(tǒng)默認(rèn) 16px 當(dāng)設(shè)置 html font-size 62.5% 的時(shí)候
16*62.5 = 10px 也就是說(shuō)這個(gè)時(shí)候的html 的font-size 的基礎(chǔ)值為 10px
因此其他的子元素在使用rem的時(shí)候就是在10px 的基礎(chǔ)上進(jìn)行倍數(shù)放大
1rem = 1*10px = 10px
2rem = 2*10px = 20px
如果設(shè)置為 6.25% 1rem = 1px 則px 可用rem替換
