《HTML5移动开发指南》——笔记7（Media Queries 移动设备样式）

viewport——虚拟窗口。主要作用是允许开发者创建一个虚拟的窗口，并且自定义其窗口的大小和缩放功能。

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>

(以上代码只要的作用的是定义一个虚拟窗口width宽度为device-width设备宽度，初始缩放比例大小为1，不允许用户手动缩放)

content属性允许设置以下6种不同的参数。

• width：虚拟窗口的屏幕宽度大小
• height：虚拟窗口的屏幕高度大小
• initial-scale：初始缩放比例
• maximun-scale：允许用户缩放的最大比例
• minimun-scale：允许用户缩放的最小比例
• user-scalable：是否允许手动缩放

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

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

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

/* 设备处于纵向模式，应用portrait样式文件*/
<link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css">
/* 设备处于横向模式，应用landscape样式文件*/
<link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css">

媒体查询的语法总结

not关键字 表示对后面的样式表达式执行取反操作

@media not screen and （max-device-width：480px）

only关键字  让不支持Media Queries的设备但能读取Media  Type类型的游览器忽略这个样式

@media only  screen and （max-device-width：480px）

media_type参数的作用是指定设备类型，通常称为媒体类型。

media_feature的主要作用是定义CSS中的设备特性，且大部分移动设备特性都接受min/max的前缀。