响应式布局依靠的就是依靠媒体查询(media)来实现的。
在CSS3中，引入了Media Queries模块，该模块允许添加媒体查询表达式，用来指定媒体模块，然后根据媒体类型来选择不同的样式。
大致的书写形式有三种：
第一种，当显示的宽度大于多少即最小为多少时:
@media screen and (min-width: 320px) {
div{
font-size: 30px;
}
}
第二种,介于X px 和 Y px 之间的情况:
@media screen and (max-width: 600px) and (min-width: 400px) {
div{
width: 200px;
background: blue;
}
}
第三种，就是小于某个值的情况，即最大值为多少的情况：
@media screen and (max-width: 600px) {
div{
width: 100%;
background: green;
}
}
这样，就可以根据媒体查询来做出我们想要的响应式布局。
