什么是响应式布局？
响应式网页（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,height,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 */
}
FLEX布局
flex布局也是制作响应式网页重要的一环。flex布局可以用来为盒状模型提供最大的灵活性，最大程度上利用网页空间。但网页宽高变化时，flex布局可以将盒子重新排列，实现网页布局整齐。
宽高设置
对于一些宽高无法固定的盒模型，宽高不能设置成定值(height：100px)， 而应该通过百分比，vh或者其他相对度量值。百分比和vh用的比较多，对于页面的主体的部分通常写：
width: 100%;
注意：不应该所有盒子都设置对象度量。大盒子设置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. Ulkit
Ulkit是一个轻量级、模块化的前端框架，帮助开发出快速、强大的Web接口，它有着全面的HTML、CSS和JS集合，易于使用和扩展。
4. Groundwork
5. Base
版权声明
文章来自网络，如无特殊说明或标注，均为本站原创发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。