前言

​ 本文主要介绍前端页面响应式布局的几种参考方案，并对每个方案做简要阐述

常用实现方案

Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。（传统的布局方案依赖于display、position、float等属性，对响应式布局并不友好）

通常可以解决绝大多数情况下的响应式布局问题，包括圣杯布局、流式布局、多列布局、内容居中等多种场景

缺点是宽度缩小但字体、图标等都不会同步缩小导致换行错位

• 推荐文章

  • Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

  • Flex 布局教程：实例篇 - 阮一峰的网络日志 (ruanyifeng.com)

Grid布局

Grid 布局即网格布局，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。

通常用于二维布局，能够轻松地实现流式布局、网格布局。可以简单理解为单元格可以任意调整位置的table布局。

• 与Flex布局的区别

  • flex 布局是一维布局，Grid 布局是二维布局
  • flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格

• 推荐文章

  • CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)
  • 最强大的 CSS 布局 —— Grid 布局 - 掘金 (juejin.cn)

UI框架自带响应式方案

许多UI框架都自带一套响应式方案，这也是最易上手的响应式方案。以ElementUI为例

• Layout布局
  • 基于24 分栏布局的el-row、el-col，能够迅速简便地创建响应式布局，xs、sm、md、lg和xl属性更具体地设置响应式布局
• Container布局容器
  • 通过<el-container>、<el-header>、<el-aside>、<el-aside>、<el-footer>快速搭建页面的基本结构。

媒体查询

通过css的@media、link的meida属性可以针对不同的屏幕大小使用对应的样式。通常用来特殊处理，适配不同屏幕，比如屏幕较小时隐藏侧边栏等

• 通常会有几个分割点，区分不同屏幕大小。常见分割方案如下

  • <=600px， <=900px，<=1200px， <=1800px，>1800px
  • <=480px，<=800px， <=1400px， >1400
  • <768px（超小屏幕-手机），>=768px（小屏幕-平板），>=992px（桌面端），>=1200px（大屏）
  • TIP: 不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是min-width，PC端优先使用的max-width

• 使用方式

  • css的@media

    /** 方式一：直接定义两个屏幕的样式 **/
    @media screen and (max-width: 1400px) {
      .home {
        width: 80%;
        font-size: 14px
      }
    }
    
    @media screen and (max-width: 900px) {
      .home {
        width: 100%;
        font-size: 10px
      }
    }
    

  • link标签的media属性

    <!-- 方式二：通过 link 引用不同屏幕的 css 文件 -->
    <link rel="stylesheet" media="(max-width: 1400px)" href="pc.css" />
    <link rel="stylesheet" media="(max-width: 900px)" href="laptop.css" /
    

动态rem/em方案

以rem/em作为长度单位声明所有节点的几何属性，再根据不同屏幕大小，设置 根元素/当前元素 的font-size来实现响应式（关于这部分的处理有很多库实现，不赘述）。通常用于对不同屏幕大小要设置不同字体大小，对响应式要求较高的系统。

scale整体缩放

scale缩放主要用于大屏可视化的响应式场景。为了得到缩放比例我们需要拿当前屏幕的宽高比例（比如：1920 * 1080）和设计稿比例（比如上图的 1440 * 1024）做一个比较

• 如果当前屏幕宽高比（1920 / 1080）大于设计稿宽高比（1440 * 1024），需要缩放的比例就是屏幕高度除以设计稿高度（1080 / 1024 = 1.05）即transform: scale(1.05)
• 如果当前屏幕宽高比（1200 / 900）小于设计稿宽高比（1440 * 1024），需要缩放的比例就是屏幕宽度除以设计稿宽度（1200 / 1440 = 0.83）即transform: scale(0.83)

总结

• 首选Flex布局、Grid布局以及UI框架自带的响应式方案，容易上手，收益比最佳
• 对于响应式要求较高的系统，可以采用rem布局
• 对于需要特殊处理的样式，对不同场景动态显影元素、动态设置元素排列方式，可以使用媒体查询
• 对于大屏项目，可以使用scale对整体进行缩放
• 除了以上提到的方案，还有注入百分比布局、viewport布局等多种实现方案，这里不再赘述，感兴趣可以自行了解。

参考文章

• Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
• 最强大的 CSS 布局 —— Grid 布局 - 掘金 (juejin.cn)
• 前端响应式布局原理与方案（详细版） - 掘金 (juejin.cn)
• PC 端响应式布局方案 - 掘金 (juejin.cn)