响应式布局的概念
响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
但需要注意的是，响应式布局的关键不仅仅在于布局，更多的是细节需要去考虑，譬如表单的响应式设计、图片的响应式设计。
响应式布局的实现步骤
当创建一个响应式网站，或者将非响应式布局改成响应式的时候，首先要关注的是元素的布局。可以先完成非响应式布局，即页面宽度是固定大小的，这样应该是没有任何难度的。在完成了非响应式后，可以通过添加媒体查询（Media Query)和响应式代码实现响应式特性。
一、设置meta标签
在完成非响应式布局后，head中添加如下代码。设置meta标签来告诉浏览器，让视口宽度等于设备宽度，而且需要禁止用户缩放行为。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">这里视口的设置需要注意的是，视口就是可见的屏幕尺寸；设置视口时只设置宽度，而不在乎高度，这是因为高度由内容自动撑开。
二、通过媒体查询来设置样式
媒体查询（media query）是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现。媒体查询，它查询的就是视口宽度，查询用户使用什么样的设备来访问的页面，知道了设备尺寸就可以调用相应的响应式代码。
那该如何写入媒体查询呢？
1、style标签中的media属性
譬如，在屏幕宽度不超过340的时候执行，背景色为红色
<style media="screen and (max-width:340px)">
body{
background:red;
}
<style>屏幕宽度在340到720的时候执行，背景色为蓝色，可以这样写
<style media="screen and (min-width:340px) and (max-width:720px)">
body{
background:blue;
}
</style> 可以复制以下代码进行实践，修改模拟设备的尺寸大小，显示不同背景色
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>响应式布局</title>
<style>
body{
margin: 0;
}
</style>
<style media="screen and (max-width:340px)">
body{ background: red; }
</style>
<style media="screen and (min-width:340px) and (max-width:720px)">
body{ background: blue; }
</style>
</head>2、在link标签中设置media属性
通过引入外部css，也可以实现上面代码显示的效果
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>响应式布局</title>
<link rel="stylesheet" href="720-1080.css" media="screen and (min-width:340px) and (max-width:720px)">
</head>那在这个720-1080.css文件中只需要写
body{ background: blue; }其实，到这一步应该能明白一些响应式布局的理念，针对不同设备尺寸编写不同样式，通过媒体查询来判断出设备尺寸类型，调用相应的样式。
3、外链css样式中的@media属性
以上内容都是将媒体查询的语句嵌在html中，现在都讲究模块分离的思想，所以我们也需要将媒体查询的语句写在css中，实现HTML和CSS的分离。
那么在head中写入
<link rel="stylesheet" href="720-1080.css">那在这个720-1080.css文件中则需要这样写
@media screen and (min-width:340px) and (max-width:720px) {
body{
background: blue;
}
}
三种媒体查询写法介绍完了，你一定会很好奇，代码中那些340px、720px都是如何确定。很简单，一般的设备尺寸可以百度，推荐这个网站 http://screensiz.es/phone
说一些比较常见的分辨率节点，都是以比较关键的机型的分辨率作为参考来设置。比如iPhone4、5的宽度是320px，这个节点就非常重要，它是小屏幕手机的一个分界点，一般都会在媒体查询的时候设置这个点。ipad mini的宽度是768，这代表着中型屏幕，所以第二个节点就设置为768 。
具体就可以这样写
/* iPad媒体查询的写法 */
@media only screen and (min-width:768px) and (max-width:1024px){
...
}
/* iPhone媒体查询的写法 */
@media only screen and (min-width:320px) and (max-width:767px){
...
}如何使用媒体查询设置网页
这里所说的媒体查询设置网页不是上面所提到的实现步骤，在本文开始就有说过，响应式布局的关键在于布局，但现实情况中，存在PC端和手机端，你编写的网页是基于PC端的，去适配手机端，还是基于手机端，为了适配PC端，这是两种情况，也就对应着两种设计方案。对于媒体查询来说，就是分为从大往小写，还是从小往大写，这涉及到其他的内容，就不赘述了，可以百度响应式布局中媒体查询分辨率顺序写法。
需要注意的细节点
本文开始也说过，响应式布局的关键不仅仅在于布局，更多的是细节需要去考虑。也就是兼容性问题、字体尺寸单位、视口宽高的设置、图片的处理、表单的处理...
1、兼容性问题
IE6、IE7、IE8是不支持媒体查询的。
解决方案：css3-mediaqueries.js。引入此文件可以解决IE6-8无法实现响应式媒体查询的尴尬。
2、字体尺寸单位
css3引入了新的单位叫做rem，rem是相对于根元素的，不要忘记重置根元素字体大小
html{font-size:100%;}
完成后，就可以定义响应式字体：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}3、视口宽高的设置
不同设备，不同宽度。宽度不固定，可以使用百分比。
4、图片的处理
带宽是手机端必须要考虑的问题，如果将PC端上的大图放在手机端，手机用户请求图片文件时，文件体积大，消耗流量多，请求事件长，这样的用户体验一定不好。所以就得把图片也处理成响应式的，根据终端类型尺寸分辨率来适配出合理的图形。
有两个解决方案，一个是看到有文章介绍的W3C的一个用于响应式图形的草案：新定义标签<picture>，因为是草案可以学习学习，这里就不赘述了，自行百度谷歌bing吧~ 另一个方案是图片液态化。
在html页面中的图片，可以通过css样式max-width来进行控制图片的最大宽度
#wrap img{
max-width:100%;
height:auto;
}
id为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。
除了img标签的图片外我们经常会遇到背景图片，譬如在id为logo 的 i 标签中设置背景图片
#log{
display:block;
width:100%;
height:40px;
text-indent:55rem;
background-img:url(logo.png);
background-repeat:no-repeat;
background-size:100% 100%;
}其中关键background-size可以设置的值有，cover：等比扩展图片来填满元素；contain：等比缩小图片来适应元素的尺寸。需要注意的细节还有很多，继续学习继续积累。
Bootstrap框架实现响应式布局
利用Bootstrap中栅格系统可以简单实现响应式布局，这里就需要去理解一下啥是栅格系统
<div class="col-md-6 col-sm-6 col-xs-12"></div>
- col-md-6 代表在PC端上显示在一行的6个栅栏，也就是一半。
- col-sm-6 代表在平板上也显示div占当前行的一半。
- col-xs-12 代表在手机端显示为当前行的百分之百填充。
确实Bootstrap的实现很简单，但是面试过程中，会有很多面试官倾向于询问自己该如何实现响应式布局，所以啊，以上的内容还是需要多加学习理解，框架只是一个工具。当然了，除了以上的方法，还有其他的响应式布局实现方式。
移动端web app要使用rem实现自适应布局:font-size的响应式
rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。
使用现代CSS的响应式版面
通过模块化缩放,使用传统属性和calc()来动态缩放你的字体大小.为字体大小使用百分比.给文本内容和媒体查询使用em,针对不同视口尺寸使用不同缩放值.视口越小,缩放比例越小,使用媒体查询或者media()函数基于视口来改变比例和基础字号
web响应式图片的5种实现
在目前的前端开发中，我们经常需要进行响应式的网站开发。本文着重介绍一下弹性图片，也就是响应式图片的解决方案：js或服务端、srcset 、sizes 、picture标签、svg图片
HTML5+CSS3响应式垂直时间轴，高端，大气
HTML5+CSS3响应式垂直时间轴，使用了HTML5标签<section>，时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中，多个DIV形成一个序列，并把这些DIV放在<section>中。
实现响应式_CSS变量
CSS 变量是 CSS 引入的一个新特性，目前绝大多数浏览器已经支持了，它可以帮助我们用更少的代码写出同样多的样式，大大提高了工作效率，本篇文章将教你如何使用 CSS 变量（css variable）。CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示变量名称
vue响应式原理及依赖收集
Vue通过设定对象属性的setter/getter方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。
vue响应式系统--observe、watcher、dep
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象，而当你修改它们时，视图会进行更新，这使得状态管理非常简单直接，我们可以只关注数据本身
Responsive Web Design 响应式网页设计
常见的布局方案:固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸
深入响应式原理
说到响应式原理其实就是双向绑定的实现，说到 双向绑定 其实有两个操作，数据变化修改dom，input等文本框修改值的时候修改数据1. 数据变化 -> 修改dom；2. 通过表单修改value -> 修改数据
媒体类型和响应式设计
常用的三种为：all，print和screen；媒体类型引用方法：link标签，xml方式，@import和css3新增的@media四种
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!