再来多一个，如下@media{body{background-color:red}}上面这句话的意思，浏览器的宽度大于或等于481px时，背景颜色是红色。这些条件都是官方定的，非常多。但实际上，真正有用的就是min-width和max-width，根据浏览器宽度来设定不同的样式。这里会很容易混淆min-width和max-width的意义。min-width表示大于等于，max-width表示小于等于。手机端样式栅格布局一提起响应式，绝对离不开强大的栅格布局，根据浏览器的宽度，设置容器不同的列宽。
媒体查询
响应式网页是这几年很流行的网页风格之一，他能够以一套网页代码，面对不同的条件，例如改变浏览器的宽度，手机横竖屏，作出不同的样式调整。
一套代码走天下
最出名的响应式框架是Bootstrap，来自Twitter。也是每个刚入门前端开发师必学的框架，利用这个框架可以很轻松实现响应式效果。
面对不同的浏览器宽度，作出界面调整
要实现响应式，关键在于使用媒体查询 Media！
语法@media （媒体特性）and （媒体特性） {你的样式}
看起来好像很复杂，先看完整的代码
@media(max-width:480px){body{background-color:green}}
上面这句话的意思，浏览器的宽度小于或等于480px时，背景颜色是绿色。
再来多一个，如下
@media(min-width:481px){body{background-color:red}}
上面这句话的意思，浏览器的宽度大于或等于481px时，背景颜色是红色。
媒体特性
媒体特性就是依据什么样的条件来进行更改样式，是根据屏幕宽度大小、还是横竖屏呢。这些条件都是官方定的，非常多。但实际上，真正有用的就是 min-width和max-width，根据浏览器宽度来设定不同的样式。
这里会很容易混淆min-width和max-width的意义。min-width表示大于等于，max-width表示小于等于。
@media(max-width: 500px) {/** 窗口宽度小于等于500像素的样式 **/}
@media(min-width: 800px) {/** 窗口宽度大于等于800像素的样式 **/}
当有多个媒体特性时，用and连接，就可以形成一个区间范围
@media(min-width: 600px) and (max-width: 700px) {/** 窗口宽度在600-700像素的样式 **/}
这就是他最基本的用法，凡是有两面性，下面来说说他的优缺点。
优点
（1）面对不同分辨率设备灵活性强
（2）能够快捷解决多设备显示适应问题
缺点
（1）兼容各种设备工作量大，效率低下
（2）代码累赘，会出现隐藏无用的元素，加载时间加长
案例全局布局
下面这种响应式布局最为常见，通过媒体查询定义不同的样式，让其能够适应手机浏览器和桌面浏览器：
1、电脑端大屏幕下，网页元素全部展示
电脑端样式
2、手机端下，因为屏幕有限，只能让主体内容呈现出来，其余部分隐藏起来，并且让字体缩小。
手机端样式
栅格布局
一提起响应式，绝对离不开强大的栅格布局，根据浏览器的宽度，设置容器不同的列宽。
<div><div></div><div></div></div>
只需要按照填写bootstrap参数，即可匹配不同的宽度
栅格布局的原理其实也是利用了媒体查询，这样你就可以自定义一份自己的栅格布局。
部分源代码
总结总结
