媒体查询
响应式网页是这几年很流行的网页风格之一，他能够以一套网页代码，面对不同的条件，例如改变浏览器的宽度，手机横竖屏，作出不同的样式调整。
一套代码走天下
最出名的响应式框架是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、手机端下，因为屏幕有限，只能让主体内容呈现出来，其余部分隐藏起来，并且让字体缩小。
手机端样式
栅格布局
一提起响应式，绝对离不开强大的栅格布局，根据浏览器的宽度，设置容器不同的列宽。
栅格布局的原理其实也是利用了媒体查询，这样你就可以自定义一份自己的栅格布局。
部分源代码
总结总结
本文来自“软馨吖”用户投稿，该文观点仅代表作者本人，不代表华夏信息网立场，本站不对文章中的任何观点负责，内容版权归原作者所有、内容只用于提供信息阅读，无任何商业用途。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站（文章、内容、图片、音频、视频）有涉嫌抄袭侵权/违法违规的内容，请发送邮件至1470280261#qq.com举报，一经查实，本站将立刻删除、维护您的正当权益。如若转载，请注明出处：http://www.xxxwhg.com/zh/95483.html
