CSS 【详解】响应式布局（含 rem 详解）

响应式布局：同一页面在不同的屏幕上有不同的布局，即一套代码自适应不同的屏幕。

为什么 rem 能用于实现响应式布局？

px 绝对长度单位，不同客户端表现都相同，不具有响应式
em 相对长度单位，相对于父元素的 font-size 值，不同元素的父元素的尺寸各不相同，没有统一标准。
rem 相对长度单位，相对于根元素的 font-size 值，页面中的根元素只有一个（即 html 标签），标准统一，可用于响应式布局。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        font-size: 20px;
      }
      .box1 {
        font-size: 1rem;
      }
      .box2 {
        font-size: 2rem;
      }
      .box3 {
        font-size: 3rem;
      }
    </style>
  </head>
  <body>
    <div class="box1">1rem</div>
    <div class="box2">2rem</div>
    <div class="box3">3rem</div>
  </body>
</html>

rem 除了可用于 font-size 外，还可以用于任意其他表示长度的属性，如 width，height 等

响应式布局的实现

方案一【推荐】相对根元素响应 = 媒体查询 + rem

使用媒体查询，随屏幕宽度的变化，调整根元素的 font-size
使用单位 rem

<!DOCTYPE html>
<html>
  <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>响应式布局</title>
    <style type="text/css">
      @media only screen and (max-width: 374px) {
        /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
        html {
          font-size: 86px;
        }
      }
      @media only screen and (min-width: 375px) and (max-width: 413px) {
        /* iphone6/7/8 和 iphone x */
        html {
          font-size: 100px;
        }
      }
      @media only screen and (min-width: 414px) {
        /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
        html {
          font-size: 110px;
        }
      }

      body {
        font-size: 0.16rem;
      }
      .titleBox {
        width: 3rem;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div class="titleBox">响应式布局———— 媒体查询 + rem</div>
  </body>
</html>

缺点

rem 具有阶梯性，即在某个媒体查询的范围内，其实是没有响应式的，只有超越媒体查询的临界线，进入新的媒体查询范围，才会触发响应式。（无法针对每一个媒体宽度值，都响应式地变化）

方案二【推荐】相对视口响应 = vh + vw

在这里插入图片描述

网页视口宽度 window.innerWidth：客户端浏览器渲染网页的区域中可见部分的宽度（如上图）
网页视口高度window.innerHeight;：客户端浏览器渲染网页的区域中可见部分的高度（如上图）

移动端的网页视口宽度和高度在PC端浏览器的模拟是不准确的（PC端的模拟没有显示移动端浏览器的头部和底部），只能在移动端上用 js 获取

相关概念还有

屏幕的高度 window.screen.height
屏幕的宽度 window.screen.width
body 的高度 document.body.clientHeight
body 的宽度 document.body.clientWidth

vh 相对长度单位， 1vh = 网页视口高度 * 1%
vw 相对长度单位， 1vw = 网页视口宽度 * 1%
vmin 相对长度单位， 1vmin = 1vh 和 1vw 中的较小值
vmax 相对长度单位， 1vmax = 1vh 和 1vw 中的较大值

CSS3 新增 vh 和 vw 就是用于实现真正的响应式布局（随客户端设备宽高的变化，页面自动适配调整变化，呈现预期的页面效果）

移动端的横竖屏切换时，可能需要使用 vmin 和 vmax 实现响应式布局

缺点

需浏览器支持 vh 和 vw 【CSS3 的语法】（某些支持CSS3语法的浏览器，仍不支持 vh 和 vw）

方案三：百分比

大部分情况下，百分比是相对于父元素进行计算的，但也有很多例外的情况，如vertical-align的百分比是相对当前元素的line-height值来计算的，又因每个元素的父元素各不相同，导致使用百分比实现响应式布局变得更加复杂，所以并不推荐。

方案四【推荐】flex 布局

缺点

flex 布局在响应式方面，主要是实现元素宽高的自适应，无法实现其他属性，如字体大小的自适应。
需浏览器支持 CSS3

其他方案

使用 JavaScript 动态计算（缺点是工作量比较大）
使用开源框架 bootstrap