目录
什么是响应式布局
响应式网页（Responsive Web，RW）又称自适应网页，是一种网页设计布局，可以根据访问媒体不同（网页宽高变化）而变化样式，防止网页布局因访问环境而造成布局混乱，影响用户体验。
为什么会造成布局混乱
移动设备（手机等）的分辨率相较于电脑通常会更小，手机浏览器会根据设定调整自己的网页可视区域，通常为980px（根据设备设置而定）。并且，在移动设备上 px 可能与电脑的度量不同，这是由于技术的发展，手机的屏幕像素密度越来越高，造成一个像素点可能对应两个物理像素。
想要实现响应式网页，需要对整个网页布局进行分析，在此基础上，再考虑以下方法。
META标签
<meta content="width=device-width, initial-scale=1.0" name="viewport">这句话可以说写网页必备，首先我们来理解一下这句话的作用。
meta是一个辅助性标签，可以提供网页元信息，方便SEO，对于响应式布局也有帮助。
viewport是设备能够显示网页的那块区域，根据设备的不同，其viewport可能也不相同。viewport有三种，分别是 layout、visual和ideal，这三种具体讲解请自行搜索。移动设备默认是 layout viewport，但在开发过程中，我们需要 ideal viewport。width=device-width 正是将宽设置成ideal viewport的状态，initial-scale 是设置页面初始缩放值，viewport总共有六个属性：
| 属性值 | 说明 |
|---|---|
| width | 设置viewport宽度 |
| height | 设置viewport高度 |
| initial-scale | 设置页面初始缩放值 |
| minimum-scale | 允许用户最小缩放值 |
| maximum-scale | 允许用户最大缩放值 |
| user-scalable | 是否允许用户缩放 |
相对度量
CSS3推出了许多相对度量单位，相对度量单位是指参考某一元素变化度量，也就是说其并不是一直不变的。
1. %：字面意思百分号，根据父元素而变化。如 width: 100% 宽度即父元素大小；
2. VW：视图宽度，根据视图而变化。如 width: 100vw 宽度即网页视图宽度；
3. vh：视图高度，根据视图而变化。如 height: 100vh 高度即网页视图高度；
4. em：根据当前对象文本大小而变化（仅用于字体）；
5. rem：根据根元素文本大小而变化（仅用于字体）；
对于一些需要根随页面变化的元素，应该使用相对度量单位。比如 input 框：
input[type=text] {
width: calc(100% - 50px) // 跟随父元素宽度且少50px
}
// 关于calc函数可以看 https://blog.csdn.net/qq_30258721/article/details/126273893FLEX布局
flex布局也是制作响应式网页重要的一环。flex布局可以用来为盒状模型提供最大的灵活性，最大程度上利用网页空间。
但网页宽高变化时，flex布局可以将盒子重新排列，实现网页布局整齐。
宽高设置
对于一些宽高无法固定的盒模型，宽高不能设置成定值（height: 100px），而应该通过百分比，vh或者其他相对度量值。
百分比和vh用的比较多，对于页面的主体的部分通常写：
width: 100%
// height有很多写法，auto、100%和100vh等等，每种对应不同情况，比如100vh表明盒子高为一页面高注意：不应该所有盒子都设置对象度量。大盒子设置 width: 100%时，应该思考其内部小盒子需不需要也设置相对度量，如果都设置成 width: 100%，那么页面变化时，几个盒子都跟着变化，造成样式混乱。一般应该大盒子设置相对，内部小盒子设置定值，这样当大盒子随着页面变化后，如果宽度不够容下所有小盒子，会将其挤到下一行。
媒体查询
@media是CSS3推出的一个新特性，它能识别各种设备，通常类型值设为screen。通过@media可以定义不同宽高下的样式，比如当页面宽度小于800px之间时主体部分背景色变为红色：
@media screen and (max-width: 800px) {
main {
background-color: red;
}
}替换元素
对于一些无法直接通过改变样式的元素，可以进行替换，如导航栏，页面缩小时，导航栏项不可以减少，字体大小改变也会导致无法看清等问题，这些将其替换成 icon 图标，点击即出现导航栏。
响应式框架
当然，现在前端框架已经发展的十分成熟，非必要不需要从零开始布局。推荐几个响应式前端框架：
1. Bootstrap
自 Bootstrap 3 起，Bootstrap就支持响应式布局，且移动设备优先。bootstrap开源且上手简单，十分推荐
2. Foundation
Foundation 也是相当成熟的前端框架，不仅支持响应式布局，也提供多种web UI组件
3. UIkit
UIkit是一个轻量级、模块化的前端框架，帮助开发出快速、强大的Web接口，它有着全面的HTML、CSS和JS集合，易于使用和扩展。
4. Groundwork
5. Base