細(xì)說em/rem/vh/vw與響應(yīng)式布局

一、em,rem的原理與應(yīng)用場景

CSS單位中的長度單位分為：相對長度、絕對長度，如下表：

引用MDN上的兩句話：

em：在 font-size 中使用是相對于父元素的字體大小，在其他屬性中使用是相對于自身的字體大小；

rem：根元素的字體大小

出處鏈接：MDN

1.em是相對長度單位，通常瀏覽器的默認(rèn)字體都是16px，那么1em = 16px，以此類推可知：0.75em = 12px，0.625em = 10px

這樣使用起來不便于計(jì)算，與實(shí)際的像素px轉(zhuǎn)換上比較麻煩，為了簡化換算，通常我們可以在body這樣寫：

body{

font-size:62.5%;

}

通過上面設(shè)置的font-size大小，我們可以換算出，16px x 62.5% = 10px，這樣，頁面中的1em = 10px，1.2em = 12px，1.6em = 16px，在視覺、換算上面簡單多了。

例如，有以下代碼：

Hello World!

我們給它的字體設(shè)置為：

div{

font-size:2.2em;

}

效果圖：

由上面的案例可以看出當(dāng)把div的字體樣式設(shè)置為2.2em時(shí)，它的實(shí)際大小為：2.2em * 10 = 22px。

但是em也有缺點(diǎn)：

em的值并不是固定的；

em會繼承父級元素的字體(font-size)的大小，參照物都是父級元素的字號大小；

em的字體大小都是相對于父級元素的大小決定的，因此會出現(xiàn)這種情況：當(dāng)一個(gè)設(shè)置了font-size的元素放在另外一個(gè)設(shè)置了font-size元素里，此時(shí)它還有一個(gè)子元素，它的子元素也設(shè)置了font-size，那么這個(gè)子元素的最后計(jì)算的結(jié)果就是三個(gè)font-size的乘積。

下面舉例說明：

body{

font-size:62.5%;

}

div{

font-size:2.2em;

}

div span{

font-size:2.2em;

}

Hello World!

你好，世界！

效果圖：

以上案例可以看出：英文字符Hello World的字體大小是2.2em x 10 = 22px，漢字你好，世界！的字體大小是2.2em x 2.2em * 10 = 48.4px。

其他，諸如，寬度、高度的原理也是一樣的。

em具有動態(tài)性，和繼承性，但還是有缺點(diǎn)，因?yàn)橛袝r(shí)候我們需要一個(gè)具有固定值的em，

它不應(yīng)愛隨著它自身和祖先元素的字號大小而變動

2.當(dāng)前font-size屬性出現(xiàn)在html中，html叫根元素，一個(gè)頁面中它是唯一的且是最大的包含塊。所以，在html中定義的em大小，可以看成一個(gè)常量(固定值)，html的所有后代元素，如果想引用html中的字號，就不能再用em了，因?yàn)閑m具有繼承性，此時(shí)，我們用一個(gè)新的關(guān)鍵字來引用根元素字號大小font-size的值，這個(gè)關(guān)鍵字就是：rem。

現(xiàn)有如下html代碼：

Hello World!

PHP是世界上最好的語言！

效果如下：

從上圖可以看出來h2的大小是24px，這是默認(rèn)效果，因?yàn)閒ont-size可以被繼承，所以span標(biāo)簽里面的字體大小也是24px。因此如果我們想要讓span標(biāo)簽繼承html根元素的font-size，就需要用rem屬性。一般瀏覽器默認(rèn)的大小是16px，所以1em = 16px，因此，1.25em = 1.25 x 16 = 20px

html{

fotn-size:1.25em;

}

此時(shí)html根元素設(shè)置了字號大小1.25em，那么這是1em = 20px了。然后我們有如下html結(jié)構(gòu)：

Hello World!

PHP是世界上最好的語言！

給上面的html結(jié)構(gòu)添加上樣式：

html{

/* 1em = 20px */

font-size:1.25em;

}

h2{

/* 1.5rem: 1.5 * 20 = 30px */

font-size:1.5rem;

}

h2 span{

/* 1rem: 1 * 20px = 20px */

font-size:1rem;

}

此時(shí)的h2，和span標(biāo)簽里的文字大小分別為30px和20px，效果如圖：

二、vh，vw

vh、vw的概念：

vh：視口的“初始包含塊”的高度的百分之一(1/100)

vw：視口的“初始包含塊”的寬度的百分之一(1/100)

在PC端，視口的寬高就是瀏覽器的寬高，但是值得注意的是，視口不包括地址欄，菜單欄，工具條，狀態(tài)欄。

在移動端，這個(gè)跟PC端有點(diǎn)不太一樣，不過一般設(shè)置：

以上代碼以顯示屏幕顯示的網(wǎng)頁寬度定義了視口寬度，網(wǎng)頁比例和最大比例均被設(shè)置成100%。

總結(jié)

以上是生活随笔為你收集整理的html pc vw过大,细说em/rem/vh/vw与响应式布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。