Css3媒体查询使用_html/css_WEB-ITnose

css3媒体查询技术的出现，在多设备支持上为我们提供了解决方案。

媒体查询的使用方法：

 @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


    

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