【技术】Media Queries移动设备样式

Viewpoint设置适应移动设备屏幕大小
（1） viewpoint虚拟窗口的主要作用是允许开发者创建一个虚拟的窗口（viewpoint），并自定义其窗口的大小和缩放功能。
     Mobile safari虚拟窗口默认大小是980像素，android browser默认是800像素，IE默认是974像素，opera是850像素 

（2）使用viewpoint
   在meta元素中定义，其主要作用是设置web页面适应移动设备的屏幕大小 <meta name=”viewpoint” content=”width=device-width,initial-scale=1,user-scalable=0”> 该代码的主要作用是自定义虚拟窗口，并制定虚拟窗口width宽带为device-width，初始缩放比例大小为1，同时不允许用户使用手动缩放功能
   Content属性：width、height、initial-scale、maximum-scale、minimum-scale，user-scalable 

（3）media queries如何工作的

 ① 最大宽带值是600px时

<link rel=”stylesheet” media=”screen and (max-width:600px)” href=”small.css”> 

在small.css 样式内，需要定义media类型的样式 

@media screen and (max-width:600px){   

　　.demo{
    　　　　Background-color:#ccc; 

　　}

}
②最大宽带值是600-900px时
<link rel=”stylesheet” media=”screen and (min-width:600) and (max-width:900px)” href=”small.css”>
在small.css 样式内，需要定义media类型的样式 

@media”screen and (min-width:600) and (max-width:900px){   

　　.demo{
    　　　Background-color:#ccc; 

　　} 

}
③最大宽带值是480px时(手机)
<link rel=”stylesheet” media=”screen and (max-device-width:480px)” href=”small.css”> 

在small.css 样式内，需要定义media类型的样式 

@media”screen and (max-device-width:480px){  

　　 .demo{
    　　　　Background-color:#ccc; 

　　} 

} 
判断当移动设备（如ipad）的方向发生变化时应用该样式。

当移动设备处于纵向portrait模式下时，应用portrait样式文件；当移动设备处于横向landscape模式下时，应用landscape样式文件。
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=” portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=” landscape.css”> 

④ Media Queries 语法总结
@media [media_query] media_type and media_feature

Media_query 查询关键字，可以使用not、only。Not取反，only让不支持media queries的设备但能读取media type类型的浏览器忽略这个样式。
Media_type 指定设备类型（即媒体类型），共10种设备类型  

●all 所有设备
●screen 显示器、笔记本、移动终端等设备
●aural、braille、 handled、 print 、projection、 tty、 tv、 embossed

Media_feature 定义css中的设备特性，大部分移动设备特性都允许接受min、max的前缀

● Width、 height
●Device_width、 device_height

● Orientation

● Aspect_raido

● Resolution

● ……
 
IE8 以下版本不支持media queries