html pc vw过大,细说em/rem/vh/vw与响应式布局
細說em/rem/vh/vw與響應式布局
一、em,rem的原理與應用場景
CSS單位中的長度單位分為：相對長度、絕對長度，如下表：
引用MDN上的兩句話：
em：在 font-size 中使用是相對于父元素的字體大小，在其他屬性中使用是相對于自身的字體大小；
rem：根元素的字體大小
出處鏈接：MDN
1.em是相對長度單位，通常瀏覽器的默認字體都是16px，那么1em = 16px，以此類推可知：0.75em = 12px，0.625em = 10px
這樣使用起來不便于計算，與實際的像素px轉換上比較麻煩，為了簡化換算，通常我們可以在body這樣寫：
body{
font-size:62.5%;
}
通過上面設置的font-size大小，我們可以換算出，16px x 62.5% = 10px，這樣，頁面中的1em = 10px，1.2em = 12px，1.6em = 16px，在視覺、換算上面簡單多了。
例如，有以下代碼：
Hello World!我們給它的字體設置為：
div{
font-size:2.2em;
}
效果圖：
由上面的案例可以看出當把div的字體樣式設置為2.2em時，它的實際大小為：2.2em * 10 = 22px。
但是em也有缺點：
em的值并不是固定的；
em會繼承父級元素的字體(font-size)的大小，參照物都是父級元素的字號大小；
em的字體大小都是相對于父級元素的大小決定的，因此會出現這種情況：當一個設置了font-size的元素放在另外一個設置了font-size元素里，此時它還有一個子元素，它的子元素也設置了font-size，那么這個子元素的最后計算的結果就是三個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具有動態性，和繼承性，但還是有缺點，因為有時候我們需要一個具有固定值的em，
它不應愛隨著它自身和祖先元素的字號大小而變動
2.當前font-size屬性出現在html中，html叫根元素，一個頁面中它是唯一的且是最大的包含塊。所以，在html中定義的em大小，可以看成一個常量(固定值)，html的所有后代元素，如果想引用html中的字號，就不能再用em了，因為em具有繼承性，此時，我們用一個新的關鍵字來引用根元素字號大小font-size的值，這個關鍵字就是：rem。
現有如下html代碼：
Hello World!
PHP是世界上最好的語言！
效果如下：
從上圖可以看出來h2的大小是24px，這是默認效果，因為font-size可以被繼承，所以span標簽里面的字體大小也是24px。因此如果我們想要讓span標簽繼承html根元素的font-size，就需要用rem屬性。一般瀏覽器默認的大小是16px，所以1em = 16px，因此，1.25em = 1.25 x 16 = 20px
html{
fotn-size:1.25em;
}
此時html根元素設置了字號大小1.25em，那么這是1em = 20px了。然后我們有如下html結構：
Hello World!
PHP是世界上最好的語言！
給上面的html結構添加上樣式：
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;
}
此時的h2，和span標簽里的文字大小分別為30px和20px，效果如圖：
二、vh，vw
vh、vw的概念：
vh：視口的“初始包含塊”的高度的百分之一(1/100)
vw：視口的“初始包含塊”的寬度的百分之一(1/100)
在PC端，視口的寬高就是瀏覽器的寬高，但是值得注意的是，視口不包括地址欄，菜單欄，工具條，狀態欄。
在移動端，這個跟PC端有點不太一樣，不過一般設置：
以上代碼以顯示屏幕顯示的網頁寬度定義了視口寬度，網頁比例和最大比例均被設置成100%。
總結
以上是生活随笔為你收集整理的html pc vw过大,细说em/rem/vh/vw与响应式布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机游戏的英文单词,关于游戏的英语词汇
- 下一篇： 园艺专业相关计算机知识,2017年秋园艺