响应式布局

前言

响应式布局指的是同一页面在不同的屏幕尺寸下游不同的布局，传统的开发方式是PC端开发一套，手机端开发一套，而使用响应式开发布局只要开发一套代码就够了，缺点就是CSS 比较重。

响应式布局表现：

响应式布局优缺点：

 优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计方案， 多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

别急，在谈及实现之前，我们需要了解一些前置知识，比如像素。

像素

什么是像素？

像素是图像中最小的单位，一个不可再分割的点，对应到物理设备上（比如计算机屏幕），就是屏幕上的一个光点。我们常说的分辨率就是长和宽上像素点的个数，比如 IPhone X 的分辨率是 1125×2436，代表屏幕横向和纵向分别有 1125 和 2436 个像素点，这里的像素是设备像素（Device Pixels）。

1 css px = 3 * 3 device px // IPhone X 中，1 个 CSS 像素对应 3*3 的 9 个设备像素点

而上面这个比值 3 就是设备像素比（Device Pixel Ratio，简称 DPR）。

DPR 可以在浏览器中通过 JavaScript 代码获取，

window.devicePixelRatio // IPhone X 中等于 3，IPhone 6/7/8 中等于 2，Web 网页为 1

像素是一个固定单位，一般我们不会使用固定像素来做响应式布局，但是你需要了解他。相反，响应式布局里经常会用到相对单位，比如 EM。

 EM

EM 相对于元素自身的 font-size，

p {
  font-size: 16px;
  padding: 1em; /* 1em = 16px */
}

 如果元素没有显式地设置 font-size，那么 1em 等于多少呢？

这个问题其实跟咱说的 em 没啥关系，这里跟 font-size 的计算规则相关，回顾一下。如果元素没有设置 font-size，会继承父元素的 font-size，如果父元素也没有，会沿着 DOM 树一直向上查找，直到根元素 html，根元素的默认字体大小为 16px。

理解了 EM，REM 就很简单了。

REM

REM = Root EM，顾名思义就是相对于根元素的 EM。所以它的计算规则比较简单，

1 rem 就等于根元素 html 的字体大小，

html {
  font-size: 14px;
}

p {
  font-size: 1rem; /* 1rem = 14px */
}

所以，如果我们改变根元素的字体大小，页面上所有使用 rem 的元素都会被重绘。

EM 和 REM 都是相对单位，我们在做响应式布局的时候应该如何选择呢？

根据两者的特性，

• EM 更适合模块化的页面元素，比如 Web Components

• REM 则更加方便，只需要设置 html 的字体大小，所以 REM 的使用更加广泛一些

实际开发中，设计图的单位是 CSS 像素，我们可以借助一些工具将 px 自动转换为 rem，

下面是一个用 PostCSS 插件在基于 Webpack 构建的项目中自动转换的例子，

var px2rem = require('postcss-px2rem');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 75})];
  }
}

vw，vh，百分比

浏览器对于 vw 和 vh 的支持相对较晚，在 Android 4.4 以下的浏览器中可能没办法使用，下面是来自 Can I use 完整的兼容性统计数据，

响应式设计里，vw 和 vh 常被用于布局，因为它们是相对于视口的，

• vw，viewport width，视口宽度，所以 1vw = 1% 视口宽度

• vh，viewport height，视口高度，所以 1vh = 1% 视口高度

以 IPhone X 为例，vw 和 CSS 像素的换算如下，

<!-- 假设我们设置视口为完美视口，这时视口宽度就等于设备宽度，CSS 像素为 375px -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  p {
    width: 10vw; /* 10vw = 1% * 10 * 375px = 37.5px */
  }
</style>

我们说百分比也可以用来设置元素的宽高，它和 vw，vh 的区别是什么？

这里只需要记住一点，百分比是相对于父元素的宽度和高度计算的。

到这里，相信你已经掌握了响应式布局里常用的所有单位。接下来，我们介绍弹性盒和栅格，它们都不是单位，而是一种新的布局方案。

响应式布局的实现方案

1. 媒体查询

css3 媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

如何选择屏幕大小的分割点，也是我们在开发中会遇到的问题， 一般情况下如果我们选择 600px, 900px, 1200px, 1800px 作为分割点，可以适配到常见的14个机型；经典的响应式布局框架： Bootstrap.

移动优先or PC优先

不管是移动优先还是PC优先，都是一句当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式，因此，移动端优先使用的是 min-width; PC 端优先使用的是 max-width

移动端：

PC 优先：