根据维基百科定义：弹性网格布局、弹性图片和媒体查询整合起来，并将其命名为RWD（Responsive Web Design，响应式布局）。下面分别介绍：
媒体查询
- 首先看下百度百科对响应式布局定义
百度百科 - 怎么调试
detail.png
- 具体实现
- viewport定义
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
width viewport宽度，为正整数或device-width
initial-scale 初始缩放值
maximum-scale 最大缩放值
minimum-scale 最小缩放值
user-scalable 是否允许缩放，为no或yes
- @media不同分辨率下适配方法
html {
font-size: 20px;
background: red;
}
@media only screen and (min-width: 320px) {
html {
font-size: 10px;
background: green;
}
}
@media only screen and (min-width: 375px) {
html {
font-size: 11.8px;
background: blue;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 13px;
background: yellow;
}
}
其中，rem是根元素(html)的字体大小。
另外，默认font-size: 20px是针对640px设计的。依次类推，得出其它分辨率下的的font-size。
最终，展示效果
iphonese.png
iphone6.png
6ps.png
- Demo过程中发现的垂直居中技术点
设置line-height等于其元素高度
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}
<div class="btn">确定</div>
弹性图片
弹性图片指的是不给图片设置固定尺寸，而是根据流体网络进行缩放，用于各种设备的尺寸。实现简单：
img {max-width: 100%;}
但在IE8上出现-图片失踪情况。解决方法如下：
使用background-image添加背景图片；
显示/隐藏父元素，给父元素使用不同的图片，然后通过媒体查询来控制显示或隐藏。
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />
@media (min-device-width: 600px) {
img[data-src-600px] {
content: attr(data-src-600px,url);
}
}
@media (min-device-width: 800px) {
img[data-src-800px] {
content: attr(data-src-800px,url);
}
}
弹性网格布局
这块内容较多，在其他文章涉及。
