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

em、rem原理与应用场景

em、rem是什么？
- em：浏览器文本的默认字号的相对关键字，通常是16px。em具有动态性和继承性，这是优点。但有时我们非常的需要一个固定值的em,它不应该随着它自身和祖先元素的字号大小而变动，就是rem。
- rem是一个固定的值，和html中的font-size关联，不受其他影响。非常适合用在font-size中。
em应用场景？
- 响应式布局的文本字号。动态设置文本字号，放大或缩小，不用一个个修改，方便。
- 设置盒模型的属性的响应式动态调整盒子的大小，只需要调整font-size就行。

em的使用，响应式按钮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>em制作一组响应式按钮组件</title>
  <style>
      /* 基本样式 */
      .btn {
          /* 背景颜色 */
          background-color: #1e9fff;
          /* 字体颜色 */
          color: #fff;
          /* 边框 */
          border: none;
          /* 轮廓线 */
          outline: none;
          /* 内边距 */
          padding: 0.5em 1em;
          /* 圆角 */
          border-radius: 0.5em;
      }
      /* 鼠标悬停样式 */
      .btn:hover {
          /* 透明度 */
          opacity: 0.5;
          /* 手型 */
          cursor: pointer;
          /* 外发光 */
          box-shadow: 0 0 9px #222;
          /* 延时 */
          transition: 0.5s;
      }
      .small {
          font-size: 8px;
      }
      /* 正常的 */
      .normal {
          font-size: 16px;
      }
      /* 较大的 */
      .larger {
          font-size: 24px;
      }
  </style>
</head>
<body>
  <button class="btn small">按钮</button>
  <button class="btn normal">按钮</button>
  <button class="btn larger">按钮</button>
</body>
</html>

em的使用。定义字号

  <style>
      html {
          font-size: 1.25em;
      }
      h2 {
          font-size: 1.5rem;
      }
      h2 span {
          font-size: 2rem;
      }
  </style>

em的使用。实现响应式布局

<!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 = 20px */
          font-size: 1.25em;
      }
      .panel {
          font-size: 1.5rem;
          margin: 1em 0;
      }
      .panel p {
          font-size: 1rem;
          text-indent: 2em;
          line-height: 2;
      }
      @media screen and (min-width: 800px) {
          /* 16 */
          html {
              font-size: 1em
          }
          .panel {
              background-color: rgb(203, 241, 29);
          }
      }
      @media screen and (min-width: 1200px) {
          /* 20 */
          html {
              font-size: 1.25em
          }
          .panel {
              background-color: rgb(23, 201, 103);
          }
      }
      @media screen and (min-width: 1500px) {
          /* 24 */
          html{
              font-size: 1.5em
          }
          .panel {
              background-color: rgb(180, 18, 18);
          }
      }
  </style>
</head>
<body>
  <div class="panel">
      <h1>冻到开裂！全国冻哭预警地图出炉 10省区小心冻伤</h1>
      <div class="panel-body">
          <p>小寒小寒冻成一团，没有最冷只有更冷。中国天气网推出2021年首个全国冻哭预警地图，提醒小伙伴们今明（1月6日至7日）天，是此次寒潮过程最冷时段，全国各地寒冷升级，10省区需小心冻伤。</p>
      </div>
  </div>
</body>
</html>

可视窗口单位：vh、vw

“可视窗口”,浏览器窗口中用于显示文档的可视区域。（视口不包括地址栏,菜单栏,工具条,状态栏）
vh: 视口的”初始包含块”的高度的百分之一(1/100)
vw: 视口的”初始包含块”的宽度的百分之一(1/100)
初始包含块: 目前可以简单的理解为”html”
vmin：使用视窗宽与高中的最小的那个。 vmax：使用视窗宽与高中的最大的那个。

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

em、rem原理与应用场景

可视窗口单位：vh、vw

相关文章