媒体查询的使用方法：
@media screen and (max-width: 480px) { .col-xs-1{width: 8.333333333333332%; float:left;} .col-xs-2{ width: 16.6666666666666%; float:left;} .col-xs-3{ width: 25%; float:left;} } 在设备窗口宽度小于480时，下面的样式会被采用，不满足这个查询设置，下面定义的css是无效的，html根本就不会识别到。
简单理解就是，如果当前宽度是1000，那么就是div上有类名.col-xs-1，div还是只是简单块元素（不会浮动和宽为百分比），查询的设置是不起作用的。
充分利用媒体查询，实现多设备支持的框架当前最热门就是bootstrap了，我们可以学习和使用它进行开发。
下面是我自己利用媒体查询写的实例页面，都是常用css布局方式配合了媒体查询，多的就不做解释了，一句话就是写法都是css里面，看看就能懂：
media/媒体查询/简易UI 测试窗口大小当前为0px演示：12列布局
1 2 3 3-1 3-2 4 5 6 7演示：表单ui
演示：表格
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
流式布局，百分比赋值，多预设设置结合媒体查询。
下载本文