CSS3 @media 查询

袖白雪

1. 
   
2. 如果文档宽度小于 300 像素则修改背景颜色(background-color):
   
3. @media screen and (max-width: 300px) {
   
4.     body {
   
5.         background-color:lightblue;
   
6.     }
   
7. }
   

复制代码

1. 
   
2. 使用 @media 查询来制作响应式设计：
   
3. @media only screen and (max-width: 500px) {
   
4.     .gridmenu {
   
5.         width:100%;
   
6.     }
   
7. 
   
8.     .gridmain {
   
9.         width:100%;
   
10.     }
    
11. 
    
12.     .gridright {
    
13.         width:100%;
    
14.     }
    
15. }
    

复制代码