【笔记】媒体查询Media Querier

1.viewport：

作用：允许开发这创建一个虚拟的窗口(viewpoint),并自定义其窗口的大小或缩放功能。

如果未定义viewpoint，浏览器会有默认大小：

AndroidBrowser:800px;

ie浏览器:974px;

Opera浏览器:850px;

2.使用viewport：  

在meta元素中使用

content的属性有六个：

width,height  如width=device-width

initial-scale:指定初始缩放比例, 如：initial-scale=1 

maximum-scale,minimum-scale指定用户缩放的最大比例/最小比例

user-scalable指定用户能否手动缩放,如：user-scalable=0//不允许用户手动缩放

3,media querier媒体查询

可视区域的宽度最大值为600px的时候应用该样式表

    
 
  
 
  
 
  
	在style1.css中需要写对应的样式：
 
  
    
@media screen and (min-width:600px)  and(max-width:900px){
        .demo{
               width:50%;
        }

}
 
  
 
  
 当可视区域的宽度在600px到900px的时候应用style2.css 
  
 
  
     
 
  
	在style2.css中： 
 
  
@media screen and (min-width:600px) and(max-width:900px){
        .demo{
               width:50%;
        }

}
 
  
	当移动设备的宽度是480px的时候
 
  
 
  
 
  
" media="screen and(max-device-width:480px)" href="style3.css"/> 
 
  
 
  
@media screen and (max-device-width:480px){
        .demo{
               width:480px;
        }

} 	
 
  
4.横竖屏portrait landscape