一、什么是响应式
知乎上以图片的形式很生动的展示了什么是响应式设计：什么是响应式布局设计
这里摘取一句很通俗的话：
css根据屏幕宽度，自动调整网页div显示和布局，以适应不同尺寸屏幕优化浏览体验。
二、响应式设计
响应式设计主要有三部分组成：流式布局，媒体查询和灵活的媒体类型。
1. 流式布局
就是用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位，通常是百分比或是em。这些相对长度多用于网格，诸如宽度，间距或是留白等属性
- 相对视窗长度
Css3中引入一些新的相对长度，他们是针对浏览器或是设备视窗尺寸的，这些新单位包括vw，wh，vmin和vmax。
vw:视窗宽度;
vh:视窗高度;
vmin:视窗最小尺寸;
vmax:视窗最大尺寸;
流式布局不推荐使用固定单位，如px或是英寸。因为屏幕的宽高会随着设备的不同而改变。网站布局需要适应这种变化，而固定单位有太多的限制。
使用非流式布局设计界面如下：
//html
<div class = "container">
<section>aa</section>
<aside>aa</aside>
</div>
//css
.container {
width: 660px;
}
section {
float: left;
margin: 10px;
width: 420px;
}
aside {
float: right;
margin: 10px;
width: 200px;
}
效果：
未使用流式布局
流式布局：
//css
.container {
max-width: 660px;
}
section {
float: left;
margin: 1.51515151%;
width: 63.63636363%;
}
aside {
float: right; margin: 1.51515151%;
width: 30.30303030%;
}
效果：
使用了流式布局
效果可以达到相同，但是它的好出就是可以适应各种尺寸的设备。为了更好的控制流式布局，你也可以使用最小宽度（min-width），最大宽度（max-width），最小高度（min-height）和最大高度（max-height），把他们应用到容器元素(container)上。
仅仅有流式布局是不够的。有时浏览器的显示窗口宽度可能很小，以至于按照缩放比例得到的布局，创建出来的列太小不能有效的显示内容。具体说，就是当布局太小或是太大，内容可能难以辨认，布局也可能遭到破坏。在这种情况下，媒体查询就用来辅助建立一个更好的用户体验。
2. 媒体查询
媒体查询是对媒体类型的一个扩展，因为经常发现目标设备自带样式，他为特定的浏览器和设备提供特殊的样式。能够为目标设备提供有针对性的样式，在响应式设计中发挥作用。
详细的应用方法在以后会整理出来。
3. 流式媒体
最后，流式的媒体对于响应式设计也是同等重要的部分。当视窗开始改变尺寸时，媒体大小并不总是做适当改变的。所以图片，视频以及其他媒体类型需要在视窗改变的情况下，按照比例改变大小。
通过使用最大宽度值为100%，是一个快速实现媒体按照比例缩放的方法。这样做可以确保在视窗变小的情况下，任何媒体可以根据他的容器宽度，按照比例缩放 。
img, video, canvas {
max-width: 100%;
}
这样的情况下可以使得媒体元素按照容器大小进行缩放。
网友评论