em与rem，vw与vh

八、em/rem 与响应式布局

1、em

em 是浏览器的默认字号，一般是 16px
1em = 16px，h2 标签是 1.5em = 24px
font-size 是可以被继承的，继承自他们的祖先元素（body、html）

（1）em 用在哪

用于响应式布局，动态调整标签大小

<style>
  /* 设置响应式的文本字号 */
  /* font-size: 是允许被继承的 */
  /* 当前h2的字号,继承自它的祖先元素(body , html) */
  /* 想改变h2的字号,大小 */
  html {
    font-size: 20px;
  }
  body div:first-of-type {
    /* 1em = 20px */
    font-size: 1em;
    /* 从现在起请忘记像素px */
    /* width: 100px;
       height: 100px; 
    */
    /* 10em : 10 * 20 = 200px */
    width: 10em;
    /* 8em : 8 * 20 = 160px */
    height: 8em;
    background-color: lightgreen;
  }
  /* 因为盒子的大小使用em,所以只需要设置盒子的font-size就可以动态的设置大小了 */
  body div {
    /* 2倍em就是40px，套用上面的声明，宽度400px，高度320px */
    font-size: 2em;
  }
</style>
<body>
  <!-- 这里的h2字号，就变成 20*1.5 = 30px -->
  <!-- 因为font-size会继承祖先元素，因此span的font-size与h2一样 -->
  <h2>www.10010.com<span>联通网厅</span></h2>
  <div></div>
</body>

（2）em 模仿 layui 按钮

<style>
  /* 基本样式 */
  .btn {
    /* 背景色 */
    background-color: #1e9fff;
    /* 字体颜色 */
    color: #fff;
    /* 去掉边框 */
    border: none;
    /* 去掉轮廓线 */
    outline: none;
    /* 外边距 */
    padding: 0.5em 1em;
    /* 设置圆角 */
    border-radius: 0.3em;
  }
  /* 鼠标悬停样式 */
  .btn:hover {
    /* 透明度 */
    opacity: 0.8;
    /* 将鼠标设置为手型 */
    cursor: pointer;
    /* 边框阴影：外发光 */
    box-shadow: 0 0 3px #888;
    /* 动画延迟（变淡的效果） */
    transition: 0.3s;
  }
  /* 如果想设置三个不同的大小的按钮,只需要为这个三个按钮指定不同的字号就可以 */
  /* 较小的 */
  .small {
    font-size: 10px;
  }
  /* 正常的 */
  .normal {
    font-size: 16px;
  }
  /* 较大的 */
  .larger {
    font-size: 22px;
  }
</style>
<body>
  <button class="btn small">Button</button>
  <button class="btn normal">Button</button>
  <button class="btn larger">Button</button>
</body>

2、rem

rem 的定义

定义：

由于 em 具有继承性，因此需要一个引用根元素中字号大小的关键字：rem，他是一个具有固定值的 em
rem 主要用于设置字号，而em则根据字号，动态设置元素大小的属性值

<style>
  html {
    /* em的初始值就是用户代理的值,默认就是16px */
    /* 1em = 20px; */
    font-size: 1.25em;
    /* 此时1em = 20px */
    /* 当前font-size属性出现在了html中 */
    /* html叫根元素,一个页面中它是唯一的且是最大的包含块 */
    /* 所以,在html中定义的em大小,可看成一个常量(固定的值) */
    /* html的所有后代元素,如果想引用html中的字号,就不能再用em了 */
    /*   */
  }
  h2 {
    /* 1.5rem : 1.5 * 20px = 30px; */
    font-size: 1.5rem;
  }
  h2 span {
    /* 1rem = 1 * 20px = 20px */
    font-size: 1rem;
  }
</style>
<body>
  <!-- span = 1rem，不再受到祖先元素的影响 -->
  <h2>www.10010.com<span>联通网厅</span></h2>
</body>

九、视口单位（vh/vw）

视口：可视窗口，即浏览器中用于显示文档的可视区域
vh: 视口高度的百分比（50vh = 50%）
vw: 视口宽度的百分比（50vw = 50%）
初始包含块: 目前可以简单的理解为html

<style>
    /* 宽度与高度分别占据可视窗口的 50% */
    .box {
        width: 50vw;
        height: 50vh;
        background-color: lightgreen;
        margin: auto;
    }
    /* 如何画出一个正方形 */
    /* 宽度与高度，谁小以谁为准 */
    .box {
        width: 80vmin;
        height: 80vmin;
        background-color: lightgreen;
        margin: auto;
    }
    /* 宽度与高度，谁大以谁为准 */
    .box {
        width: 80vmax;
        height: 80vmax;
        background-color: lightgreen;
        margin: auto;
    }
</style>
<body>
    <div class="box"></div>
</body>

八、em/rem 与响应式布局

1、em

（1）em 用在哪

（2）em 模仿 layui 按钮

2、rem

rem 的定义

九、视口单位（vh/vw）

相关文章