em,rem的原理与应用场景， rem / em /vh/ vw的区别与联系 -

什么是em和rem

em、rem 和px 一样都是css中的一个单位，

1、px像素单位，是固定的，不会随着页面变化而变化，
2、em不固定，会随着页面变化而变化，适用于响应式布局，em是相对于父元素，具有继承性，文字类内容不适合用em单位，
计算公式：em乘以html元素的值 ，（html根元素字体大小设置为20px,2em转换成像素为：20*2=40px）
3、rem也不固定，同样会随着页面变化而变化，适用于响应式布局，rem是相对于html根元素，html根元素字体大小是多少
，它就是多少，适合文字类，rem中的r 就是root（根源）的意思，

演示代码

   <title>按自己理解的方式详细描述em,rem的原理与应用场景</title>
   <style>
        html {
            /* 设置html字体大小 */
            font-size: 20px;
        }
        div {
            /* 字体大小为5em,转换后为100px */
            font-size: 5em;
            width: 60vw;
            height: 70vh;
        }
        div>p:nth-last-child(1) {
            /* 引用 html元素字体大小，转换后为20px; */
            font-size: 1rem;
            color: red;
        }
    </style>
</head>
<body>
  <div>
            <p>em计算公式</p>
            <p>rem示例3</p>
    </div>
</body>

rem/em/vh/vw 的区别和联系：

这里先说一下它们的概念；

1、em是一个相对的长度单位，它的参考物是父元素的字体大小（font-size），
如果当前父元素没有设置字体的值，就会以当前html文档根元素（html元素的字体大小为准）；据有继承属性；
2、rem也是一个相对长度的单位，rem是相对于html根元素字体大小来计算单位值的，
如果html元素没有设置值，就会根据浏览器的默认字体大小来计算。

vw/vh;vmax/vmin这四个单位都是基于视口（浏览器显示html文档的区域）；

3、vw是相对视口的宽度而定，视口的总宽度为100vw;1vw长度等于视口宽度的1%（20vw，20%），
假设浏览器宽度为500px，1vw就等于（500px/100=5px）;
4、vh是相对视口的高度而定，视口的总高度为100vh;1vh长度等于视口高度的1%;
假设浏览器高度为500px，1vh就等于（500px/100=5px）;
vmin和vmax是相对视口的高度两者之间的最小值或最大值；
如果浏览器的宽为500px;高为200px;1vmax 转换成px 等于5px;1vmin 转换成px 等于2px;

演示代码

 <style>
        div {
          border: 2px solid skyblue;
             width: 30vw;
            height: 60vh;
            background-color: yellow;
         }
    </style>
    </head>
<body>
 <div>
        <p>视口宽度和视口高度视口视口高度视口宽视口高度视口宽视口高度视口宽视口高度视口宽宽度和视</p>
    </div>
</body>