em和rem的联系和区别

em和rem都是计量单位，都能表示尺寸，更适用于响应式布局但他们的用途不同！

em是什么？

浏览器默认的文本字号，通常是16px，也就是1em=16px
em的使用：设置响应式文本的字号。em有继承性，使用父元素的字号font-size的值

rem是定义字号使用的。

html是根元素，一个页面中它是唯一的且最大的包含块，所以在html中定义em的大小，可以看成一个常量。html的所有后代元素，想引用html中的字号，就不能用em！因为em有继承性！

两者区别：

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

em的使用

<style>
    /*
    html是根元素，通常浏览器在html设置的字号是16px
    如果想改变默认字号，则修改font-size的值
    1em=font-size的值
    */
 html{
     font-size:20px;
 }
    /*设置div的宽高em*/
    div{
    width=10em;/* 10em * 20 */
    height=5em;/* 5em * 20 */
    }
    .test{
        font-size:2em;/*em的继承性，则现在 1em=2*20px =40px */
    }
    /* 此时div的宽高就变成了 10em * 40  */
</style>
<body>
    <div class="test"></div>
</body>

rem的使用

<style>
 html{
     /* 1.25 *16 = 20px*/
     font-size:1.25em;
 }
    div{
        /* rem是相对于html，不受外界影响*/
        width:10rem; /* 10 * 20px */
        height:5rem;
    }
    .test{
        font-size:2rem;/* 2*20px=40px */
    }
    /* rem没有继承性只参照html。所以 宽高不变还是 10 * 20px */
</style>
<body>
    <div class="test"></div>
</body>

vh和vw

学习vh和vw之前先了解视口，视口就是可视窗口，就是浏览器窗口中用于显示文档的可视区域
vh:视口的 “初始包含块” 的高度的百分之一(1/100)
vw：视口的 “初始包含块” 的宽度的百分之一（1/100）
注：初始包含块：目前可以简单的理解为 “html”
通俗讲就是将窗口划分宽高划分100份，

<style>
    /*
    div占据窗口的宽高各50份。也就是一半
    */
.box{
    width:50vw;
    height:50vh;
    background-color:red;
    margin:auto;
}
</style>
<body>
    <div class="box"></div>
</body>

em和rem的联系和区别

em和rem的联系和区别

em是什么？

rem是定义字号使用的。

两者区别：

em的使用

rem的使用

vh和vw

相关文章