什么是响应式布局

响应式布局是一种设计方法，旨在使网站在不同设备上的不同屏幕大小和分辨率下呈现出最佳效果。响应式布局通过使用弹性网格、图片和CSS媒体查询等技术，可以让网站的布局和内容根据用户使用的设备自动调整。

如何实现

实现响应式布局需要考虑以下几个方面：

1. 弹性网格布局：使用弹性网格布局（flexbox）可以让网页中的元素根据屏幕大小自动调整位置和大小，从而适应不同设备。
2. 媒体查询：使用CSS媒体查询可以根据屏幕大小和分辨率应用不同的CSS样式，以适应不同的设备。
3. 图片处理：针对不同设备加载不同大小的图片，可以减少页面加载时间和带宽使用，提高网页性能。
4. 相对单位：使用相对单位如em、rem、vh、vw等，可以让网页中的元素根据屏幕大小自动调整大小，而不是固定大小。
5. 流式布局：流式布局指网页中的元素宽度按照百分比进行设定，而不是固定的像素值。这样可以让网页在不同设备上展现出相同的比例。

上述几个思路, 大多都可以在网上找到详细的解读, 这里就不多赘述了, 本文只介绍目前较为通用的响应式方案: 媒体查询+rem

下面是一个示例方案, 具体实现还需参照设计稿基础宽度调整基准字体大小:

1. viewport标签

viewport标签：用于告诉浏览器如何渲染页面的视口大小。我们可以使用viewport标签来指定视口的宽度、缩放比例、最小宽度等属性，以便在不同设备上呈现不同的页面布局和样式。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

这个viewport标签告诉浏览器，将页面的宽度设置为设备的宽度，并将初始缩放比例设置为1.0，缩放初始化为1且用户不可以缩放。这样可以确保在不同设备上，页面布局和样式都能自适应调整。

2. css媒体查询

/* 设置根元素字体大小 */
html {
  font-size: 16px;
}

/* 根据不同屏幕宽度设置根元素字体大小 */
@media screen and (min-width: 480px) {
  html {
    font-size: 18px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 20px;
  }
}

@media screen and (min-width: 992px) {
  html {
    font-size: 22px;
  }
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 24px;
  }
}

我们首先设置了根元素的字体大小为16px，然后使用媒体查询根据不同的屏幕宽度设置不同的字体大小。

3. postcss-pxtorem插件引入

安装pxtorem插件

使用npm：npm install postcss-pxtorem --save-dev
使用yarn：yarn add postcss-pxtorem --dev

配置postcss.config.js

在项目根目录中创建一个名为postcss.config.js的文件，并将以下代码添加到该文件中：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16,
      propList: ['*'],
    },
  },
};

配置vue.config.js

需要将postcss-loader添加到vue.config.js中的webpack配置中：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 75,
            propList: ['*'],
          }),
        ],
      },
    },
  },
};

其中rootValue需要根据设计稿宽度设置~

优化方案

上述代码中, 我们需要手动设置页面根元素字体大小, 而现代电子设备的屏幕大小/比例繁杂, 无法完全覆盖, 且手动设置容易造成代码冗余, 推荐使用lib-flexible插件进行改良

lib-flexible库(建议弃用)

(由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代。)

lib-flexible库的作用是根据不同的屏幕宽度动态调整根元素的字体大小，从而实现移动端页面的适配。

引入lib-flexible 可以使用以下命令安装lib-flexible库：

使用npm：npm install lib-flexible --save
使用yarn：yarn add lib-flexible

修改postcss.config.js配置文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 1,
      propList: ['*'],
    },
  },
};

将rootValue的值设置为1。这是因为lib-flexible库会自动设置根元素的字体大小，而不是使用pxtorem插件中的基准值。

amfe-flexible(推荐使用)

引入amfe-flexible

使用npm：npm i -S amfe-flexible
使用yarn：yarn add amfe-flexible

在main.js 中引入

import "amfe-flexible"

即可看到效果