Css3媒体查询使用_html/css

媒体查询的使用方法：

 @media screen and (max-width: 480px) { .col-xs-1{width: 8.333333333333332%; float:left;} .col-xs-2{ width: 16.666666666666664%; float:left;} .col-xs-3{ width: 25%; float:left;} }

在设备窗口宽度小于480时，下面的样式会被采用，不满足这个查询设置，下面定义的css是无效的，html根本就不会识别到。

简单理解就是，如果当前宽度是1000，那么就是div上有类名.col-xs-1，div还是只是简单块元素（不会浮动和宽为百分比），查询的设置是不起作用的。

充分利用媒体查询，实现多设备支持的框架当前最热门就是bootstrap了，我们可以学习和使用它进行开发。

下面是我自己利用媒体查询写的实例页面，都是常用css布局方式配合了媒体查询，多的就不做解释了，一句话就是写法都是css里面，看看就能懂：

      测试窗口大小当前为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
 
 

流式布局，百分比赋值，多预设设置结合媒体查询。