原文网址：
简介
说明
本文介绍前端响应式布局的实现方式。
响应式布局简介
响应式布局：只需要一套代码就可以了，它可以适用于所有设备（PC、手机、平板等）。同一页面在不同屏幕尺寸下有不同的布局。
前端的各种布局详见：静态布局、流式布局、自适应布局、响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客
方案1：媒体查询
简介
这是最好用最常用的方案。
使用媒体查询获取设备的尺寸，然后进行布局和样式的设置，从而达到适合不同设备的目的。
| 设备划分 | 小区间 |
|---|---|
| 超小屏幕（手机） | < 768 像素 |
| 小屏设备（平板） | >= 768px ~ < 992px |
| 大屏设备（屏幕显示器） | >= 992px ~ < 1200px |
| 超大屏设备（大屏幕显示器） | >= 1200 像素 |
上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。
示例
/* 初始样式 */
body {
background-color: grey;
}
/* 大型设备（大台式电脑，1200px 起） */
@media screen and (min-width:1200px) {
body {
background-color: yellow;
}
}
/* 中型设备（台式电脑，992px 起） */
@media screen and (min-width:992px) and (max-width:1200px) {
body {
background-color: green;
}
}
/* 小型设备（平板电脑，768px 起） */
@media screen and (min-width:768px) and (max-width:992px) {
body {
background-color: blue;
}
}
/* 超小设备（手机，小于 768px） */
@media screen and (max-width:768px) {
body {
background-color: red;
}
}
方案2：百分比
简介
通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。
Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高。
子元素height、width 属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素：
- 子元素的 top/left 和 bottom/right 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度/宽度；
- 子元素的 padding 如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的 width，而与父元素的 height 无关；
- 子元素的 margin 如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的 width；
- border-radius 不一样，如果设置 border-radius 为百分比，则是相对于自身的宽度。
缺点
- border、 font-size 等属性不能用百分比设置。
- 计算困难。如果要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
- 布局复杂。各个属性中如果使用百分比，相对父元素的属性并不是唯一的。
使用场景
对图片和大块布局进行百分比设置。
方案3：Rem
简介
rem是一个相对单位， 1rem = html元素的font-size大小。
有两种方法可以达到适配不同屏幕：
- 媒体查询，在不同分辨率下给 html 的 font-size 赋值。
- js 动态计算赋值
布局思路
- 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
- 高度值可以设置固定值，设计稿有多大，我们就严格有多大
- 所有设置的固定值都用rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值)
- js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了
缺点
打开页面时候，元素大小会有一个变化过程。
方案4：vw/vh
CSS3中引入了一个新的单位vw/vh，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：
| 单位 |
含义 |
| vw |
相对于视窗的宽度，1vw 等于视口宽度的1%。即视窗总宽度是100vw |
| vh |
相对于视窗的高度，1vh 等于视口高度的1%。即视窗总高度是100vh |
| vmin |
vw和vh中的较小值 |
| vmax |
vw和vh中的较大值 |