↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第2章 媒体查询：支持不同的视口
我们仅仅使用几行代码，就可以根据诸如视口宽度、屏幕比例、设备方向灯特性来改变页面内容的显示方式
媒体类型media type
screen
print
为了清晰起见，我这这里使用了颜色名称，但实际上最好使用十六进制颜色值
可以在样式表的开头设置基本样式，然后使用媒体查询media query来进一步重写相应的部分
现代浏览器虽然可以智能地忽略与自身不匹配的样式文件，但它却不一定不下载这些文件。因此，将不同媒体查询的样式保存到独立的文件中没有太大好处
Respond.js是为Internet Explorer 8及更低版本增加媒体查询支持的最快的javascript工具
https://github.com/scottjehl/Respond
ios上的safari浏览器默认是在980像素宽的画布上渲染页面，然后将画布缩小到视口大小匹配
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
将页面放大两倍
页面的宽度等于设备宽度
可缩放范围
maximum-scale
minimum-scale
禁止缩放
user-scalable=no
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { background-color: grey; } @media screen and (max-width: 960px) { body { background-color: red; } } @media screen and (max-width: 768px) { body { background-color: orange; } } @media screen and (max-width: 550px) { body { background-color: yellow; } } </style> <!-- 纵向放置的显示屏设备加载样式文件 --> <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 640px)" href="style1.css" /> <!-- screen and (orientation: portrait) and (min-width: 640px) 或 projection投影仪 --> <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 640px), projection" href="style2.css" /> <!-- 非纵向放置的显示屏设备加载样式文件 --> <link rel="stylesheet" media="not screen and (orientation: portrait)" href="style3.css" /> </head> <body> <pre> width 视口宽度 height 视口高度 device-width 屏幕宽度 deveice-height 屏幕高度 orientation 检查设备出于横向还是纵向 aspect-ratio 基于视口宽度和高度的宽高比 device-aspect-ratio 基于设备渲染平面宽度和高度的宽高比 color 每种颜色的位数 min-color: 16会检测设备是否拥有16位颜色 color-index 设备的颜色索引表中的颜色数 monochrome 检测单色帧缓存区中每像素所使用的位数 resolution 用于检测屏幕或打印机的分辨率 scan 电视机的扫描方式 grid 用来检测输出设备是网格设备还是位图设备 除scan和grid之外，都可以使用min和max前缀来创建一个查询范围 </pre> </body> </html>
