响应小实例看这：简单的响应式页面小示例 现在移动优先的站点越来越多，响应式网站的设计也越来越普及，更多的前端框架被开发出来，比如众所周知的bootstrap，国产的拼图也挺不错，但貌似上了1.0版本就
响应小实例看这：简单的响应式页面小示例
现在移动优先的站点越来越多，响应式网站的设计也越来越普及，更多的前端框架被开发出来，比如众所周知的bootstrap，国产的拼图也挺不错，但貌似上了1.0版本就没在更新，其实响应式的机理就是media query。
下面展示几个最基本的使用方法
1、在header中进行媒体查询来判定引入哪个css样式表
使用media做查询
<link rel="stylesheet" type="text/css" media="screen and (max-width: 400px)" href="small.css"><link rel="stylesheet" type="text/css" media="screen and (min-width:401) and (max-width:800px)" href="middle.css">或者使用import命令：
<style type="text/css"> @import url('small.css') screen and (max-width: 400px); @import url('middle.css') screen and (min-width: 401px) and (max-width: 800px);</style>或者直接在style标签里写内联样式，其实就和普通css一样，写在css文件里引入做外联，直接写在style里做内联
<style type="text/css">@media screen and and (max-width: 400px) { //when the width lower to 400px body { background: #cccccc; }}@media screen and (min-width: 401px) and (max-width: 800px) { //when the width between 401px and 800px body { background: #ffffff; }}</style>以上将会实现当屏幕宽度小于400px时引入small.css，当大于400px小于800px时则引入middle.css
2、在css文件中进行媒体查询
media，在css文件中也可直接编写media query样式
//@media screen and and (max-width: 400px) { //when the width lower to 400px body { background: #cccccc; }}@media screen and (min-width: 401px) and (max-width: 800px) { //when the width between 401px and 800px body { background: #ffffff; }}import，你可以建立一个全局的样式文件，style.css，将响应模块的样式做如下导入即可
//当小于400px时导入small.css@import url('small.css') screen and (max-width: 400px);//当大于400px小于800px时导入middle.css@import url('middle.css') screen and (min-width: 401px) and (max-width: 800px);其实查询就是两种方式，import是用来做导入判断的，media既可以做导入，也可以直接做查询。
