em，rem，vw，vh的原理与应用场景

em，rem的原理与应用场景

1.em：em通常用于依赖字号的元素属性上，比如margin、padding、width、height等元素；
2.rem：root em的缩写，通常用于font-size字号的设置上；
3.px：通常用于边框宽度border的设置上
4.em是根据它的父级来改变大小而rem只会随着root根元素的大小来改变

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em,rem的原理与应用场景</title>
    <style>
        :root {
          font-size: 0.7em;
        }
        .news {
          background-color: #ccc;
          border: #000 solid 1px;
          padding: 1em;
          margin: 1em;
        }
        .news h2 {
          font-size: 3rem;
        }
        .news1 {
          font-size: 1.25rem;
          text-indent: 2em;
        }
      </style>
</head>
<body>
      <div class="news">
        <h2>1217作业</h2>
        <div class="news1">
          <p>按自己理解的方式详细描述em,rem的原理与应用场景 ，并实例演示 2. 分析 rem / em /vh/ vw的区别与联系</p>
        </div>
      </div>
</body>
</html>

vh,vw的应用

1、vw：表示视口的宽度，1vw就表示当前视口宽度的百分之一；
2、vh：表示视口的高度，1vh就表示当前视口高度的百分之一；
3、vmin：表示在vw与vh中取最小值；
4、vmax：表示在vw与vh中取最大值

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vh/vw</title>
    <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        .box1 {
          background-color: blue;
          width: 50vw;
          height: 25vh;
        }
        .box2 {
          background-color: coral;
          width: 50vw;
          height: 25vh;
        }
        .box3 {
          background-color: blanchedalmond;
          width: 50vw;
          height: 25vh;
        }
      </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

em，rem的原理与应用场景

vh,vw的应用

相关文章