如何实现响应式（自适应）网页

什么是响应式布局

为什么会造成布局混乱

META标签

相对度量

FLEX布局

宽高设置

媒体查询

替换元素

响应式框架

什么是响应式布局

响应式网页（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/126273893

FLEX布局

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