em、rem的原理與應(yīng)用場景、rem/em/vh/vw區(qū)別于聯(lián)系

1.em、rem的原理與應(yīng)用

1.px是固定像素，一旦設(shè)置了就無法因?yàn)檫m應(yīng)頁面而改變
2.em和rem相對于px更具有靈活性，因?yàn)樗鼈冮L度不是定是的，更適用于響應(yīng)式布局
- 2-1.em和rem的區(qū)別一句話概括：em相對于父元素，rem相對于html根元素
- 2-2.rem中的r意思是root（根源）

em盒子模型應(yīng)用:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em的原理與應(yīng)用</title>
    <style>
        html {
            font-size: 20px;
        }
        /* 盒子模型的響應(yīng)式 */
        body:first-of-type div:first-of-type {
            /* 1em = 20px */
            font-size: 1em;
            /* 10em * 20px = 200px */
            width: 10em;
            /* 8em * 20px = 160px */
            height: 8em;
            background-color: skyblue;
        }
        /* 因?yàn)楹凶哟笮∈褂昧薳m，所以后面只需要設(shè)置字號就可以響應(yīng)式改變盒子的大小 */
        body:first-of-type div:first-of-type {
            font-size: 0.8em;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

演示截圖:

rem定義字號應(yīng)用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem定義字號</title>
    <style>
        html {
            /* em的初始值就是（瀏覽器）用戶代理的值，默認(rèn)就是16px */
            /* 1em = 20px */
            font-size: 1.25em;
            /* 此時(shí) 1em = 20px */
            /* 當(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 */
        }
        h1 {
            /* 1.5rem :1.5 * 20px = 30px */
            font-size: 1.5rem;
        }
        h1 span {
            /* 1 * 20px =20px */
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <h1>hello world <span>你好</span></h1>
</body>
</html>

演示截圖

2.rem / em /vh/ vw的區(qū)別與聯(lián)系

rem繼承根html字號相對字號的固定值
em引用當(dāng)前盒子或繼承父級元素或祖先元素的font-size設(shè)置，如果都沒有設(shè)置，則繼承html根的字號設(shè)置
vh/vw視口單位，視口意思就是瀏覽器的可視區(qū)域，不包括地址欄、菜單欄、工具欄、狀態(tài)欄
- vh視口的初始包含塊的高度百分之一(1/100)
- vw視口的初識包含塊的寬度百分之一(1/100)
- 視口單位值按視口大小等比改變，主要用于移動端布局
vmin/vmax可視口最小/最大
- width:80vmin / height:80vmin （無論怎么變換頁面都是正方形）
- width:80vmax / height:80vmax 手機(jī)橫屏應(yīng)用

批改老師：