em,rem的原理与应用场景，并实例演示rem / em /vh/ vw的区别与联系

em原理与应用
em,rem的运用
1.什么是em?
em: 是浏览器文本的默认字号的相对关键字,大多数浏览器em通常是16px
2.em应用在哪 ?
设置响应式的文本字号，font-size: 是允许被继承的；当前元素的字号,继承自它的父级及其祖先元素(body , html)
注：当前p元素的 font-size: 为1em是则继承了body设置的16px；如果body设置20排序，则当前元素的1em为20px；em也可以用于任何元素
3.设置盒模型的属性的响应式

em也可以用于设置盒模型的属性的响应式
<div class="div1"></div>  
<hr>
如果给当前元素设置font-size: 设置 则重新定义像素
<div class="div2"></div> 
因为盒子的大小使用em,所以只需要设置盒子的font-size就可以动态的设置大小了

rem

因em: 动态性和继承性,但是也有缺点
我们非常的需要一个固定值的em,它不应该随着它自身和祖先元素的字号大小而变动
而用rem就可以解决掉, rem就是一个固定值的em
html在一个页面中它是唯一的且是最大的包含块,也叫根元素
所以,在html中定义的em大小,可看成一个常量(固定的值)
此时,我们用一个新的关键字rem来引用根元素中的字号大小font-size的值
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            /* 设置根元素字号 */
            font-size: 20px;
        }
        /* 后面就可以直接使用"rem"来引用定义字号或其它属性 */
        div{
            /*此时 1.5rem : 1.5 * 20px = 30px; */
            font-size: 1.5rem;
            width: 10em;/*宽度为 10em*20排序=300px*/
            height: 10em;
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

以后的字号,强烈推荐使用rem设置,元素用em设置

vh 与 vw

视口: “可视窗口”,浏览器窗口中用于显示文档的可视区域
vh: 视口的”初始包含块”的高度的百分之一(1/100)
vw: 视口的”初始包含块”的宽度的百分之一(1/100)
初始包含块: 目前可以简单的理解为”html”
这个主要用于移动端布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视口单位: vh / vw</title>
    <style>
        div{
            width: 80vw; /*宽度的80%*/
            height: 100vh;/*高度的100%*/
            background-color: cyan;
            margin: auto;
        }
    </style>
</head>
<body>
    <div>
        <p>视口: "可视窗口",浏览器窗口中用于显示文档的可视区域</p> 
        <p>vh: 视口的"初始包含块"的高度的百分之一(1/100)
            vw: 视口的"初始包含块"的宽度的百分之一(1/100) 
            初始包含块: 目前 可以简单的理解为"html"
            这个主要用于移动端布局
        </p>
    </div>
</body>
</html>

总结：em，rem 主要用于内容区的自适应元素，而vh，vw用于设置不同设备的可视窗口。

综合小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>em实现响应式布局</title>
    <style>
        html{
            font-size: 1em;
        }
        main{
            width: 100vw;
            height: 100vh;
            background-color: indianred;
        }
        /* vmax,vw,vh同为视口单位 */
        /* 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax */
        /* vw/vh/vmin/vmax是视窗单位，也是相对单位。相对的不是父节点或页面的根节点，而是由视窗（viewport）的大小决定的，单位1，代表类似于1% */
        /* main{
            width: 80vmax;
            height: 80vmax;
            background-color: lightgreen;
            margin: auto;
        } */
        div{
            width: 30em;
            height: 15em;
            background-color: burlywood;
            margin: auto;
            box-sizing: border-box;
            padding: 1em;
        }
        h3{
            color: chocolate;
        }
        p{
            font-size: 0.8rem;
            text-indent: 2em;
            color: #a1a1a1ee;
        }
        /* 屏幕宽度 >= 800px, 字号放大到30px */
        @media screen and (min-width: 800px) {
            html{
                font-size: 1.5em;
            }
            div{
                background-color: cornflowerblue;
            }
        }
        @media screen and (min-width: 1200px) {
            html{
                font-size: 1.8em;
            }
            div{
                background-color: rgb(234, 252, 252);
            }
        }
    </style>
</head>
<body>
    <main>
        <div>
            <h3>响应式页面的实现</h3>
            <p>目前一般常见的实现响应式有两种方法，一种是利用媒体查询，另外一种是bootstrap下的栅格布局，以后介绍bootstrap的时候来介绍栅格布局，这里主要来说一下如何利用媒体查询实现响应式布局。
                媒体查询，即 @media 查询，媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。因为是设置样式，所以将媒体查询相关的代码放在css文件的最下方即可。</p>
        </div>
    </main>
</body>
</html>

相关文章