HTML-HTML5+CSS3权威指南阅读（四、媒体查询）

1.媒体类型

HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性, 扩展了媒体类型的功能;

2.媒体特性检测
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成, 媒体查询中可用于检测的媒体特性有width、height和color（等）, 使用媒体查询, 可以在不改变页面内容的情况下, 为特定的一些输出设备定制显示效果; 主要常用的是width, device-width;

视口宽度
height:视口高度
device-渲染表面的宽度（对我们来说，就是设备屏幕的宽度）
device-height:渲染表面的高度（对我们来说，就是设备屏幕的高度）
orientation:检查设备处于横向还是纵向
aspect-ratio:基于视口宽度和高度的宽高比, 一个16∶9比例的显示屏可以这样定义aspect-ratio: 16/9
device-aspect-ratio:和aspect-ratio类似, 基于设备渲染平面宽度和高度的宽高比
color:每种颜色的位数, 例如min-color: 16会检测设备是否拥有16位颜色
color-index:设备的颜色索引表中的颜色数, 值必须是非负整数
monochrome:检测单色帧缓冲区中每像素所使用的位数, 值必须是非负整数，如monochrome: 2
resolution:用来检测屏幕或打印机的分辨率，如min-resolution: 300dpi, 还可以接受每厘米像素点数的度量值, 如min-resolution: 118dpcm
scan:电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔行扫描）, 如720p HD电视（720p的p即表明是逐行扫描）匹配scan: progressive，而1080i HD电视（1080i中的i表明是隔行扫描）匹配scan: interlace
grid:用来检测输出设备是网格设备还是位图设备

在上述所有特性中, 除scan和grid之外, 都可使用min和max前缀来创建一个查询范围

3.使用媒体查询的三种方式

　　1).在CSS文件引用时使用

　　你是一块纵向(orientation: portrait)放置的显示屏(screen)吗?如果是则加载指定CSS文件

<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css" />

　　限制只有视口宽度大于800像素(min- 800px)的显示屏设备(screen)才能加载该CSS文件

<link rel="stylesheet" media="screen and (orientation: portrait) and (min- 800px)" href="800wide-portrait-screen.css" />

　　限制只有{视口宽度大于800像素(min- 800px)的显示屏设备(screen)}或者投影仪(projection)才能加载该CSS文件

<link rel="stylesheet" media="screen and (orientation: portrait) and (min- 800px), projection" href="800wide-portrait-screen.css" />

　　2).在CSS样式表中使用

　　如果是显示屏(screen)并且屏幕分辨率小于等于400px(max-device- 400px)时h1的颜色为绿色, 注意device-width为设备显示屏宽度, width为视口宽度

@media screen and (max-device- 400px) { 
    h1 {color: green;} 
}

　　3).在样式表中引入其他样式表时

　　如果是显示屏(screen)并且屏幕分辨率小于等于400px(max- 360px)时倒入phone.css文件

@import url("phone.css") screen and (max-360px);

　　PS: 此方法会增加HTTP请求, 慎用

　　 Respond.js（https://github.com/scottjehl/Respond）是为Internet Explorer 8及更低版本增加媒体查询支持的最快的JavaScript工具, 但它目前无法解析CSS的@import命令

4.重置样式

　　重置样式就是一组CSS声明, 用来覆盖不同浏览器渲染HTML元素时的各种默认样式, 重置样式一般会被加入到主样式文件的开头, 用来将各个浏览器的自有默认样式重置成统一表现, 确保样式表中后续追加的样式在不同浏览器中有相同的显示效果;

　　例如以下:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

5.浏览器自动调整页面大小

　　比如 IOS 上的 Safari 浏览器默认是在980像素宽的画布上渲染页面, 然后将画布缩小到与视口大小匹配, 所以展示大页面时内容没有被切掉

6.阻止移动浏览器自动调整页面大小

　　基于WebKit核心的浏览器(比如IOS和Android的浏览器)和很多其他浏览器都支持用viewport meta元素覆盖默认的画布缩放设置, 下例为将页面放大到设备实际尺寸两倍显示的meta标签

<meta name="viewport" content="initial-scale=2.0,width=device-width" />

　　name="viewport"属性不言而喻, content="initial-scale=2.0的意思是将页面放大两倍（同理，0.5表示缩小一半，3.0表示放大3倍）, 同时width=device-width告诉浏览器页面的宽度应该等于设备宽度

<meta name="viewport" content="initial-scale=1.0,width=device-width" />

　　将缩放比例设置为1.0, 这表示浏览器将按照其视口的实际大小来渲染页面, 将宽度设置为设备宽度, 意味着支持该特性的浏览器都将会按照设备宽度的实际大小来渲染页面, 设置完后任何浏览器都不再缩放页面了

7.详解viewport

　　"viewport", 翻译为中文可以叫做"视区", 大家都知道移动设备的屏幕一般都比PC小很多, webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上, 默认的虚拟窗口为980像素宽(修改viewport宽度即修改此值)（目前大部分网站的标准宽度）, 然后按一定的比例（3：1或2：1）进行缩放, 也就是说当我们加载一个普通网页的时候, webkit会先以980像素(修改viewport宽度即修改此值)的浏览器标准加载网页, 然后再把整个页面全部缩小为490像素的宽度, 注意这个缩小是一个全局缩小, 也就是页面上的所有元素都会缩小, 如下图所示, 一个普通的文章页面在移动设备的效果：

　　页面以980像素加载, 没有变形, 但是按比例缩放后, 很多东西用肉眼基本看不清了

　　那么我们能不能人为改变webkit的视区呢？当然能, 在<head>与</head>之间加上如下视区代码：

<meta name="viewport" content="width=500"/>

　　我们来看看页面加上强制视区大小命令后效果怎么样？如下图所示：

　　那么有没有更好的方法呢？比如说我们自动检测移动设备屏幕大小, 然后让内容自适应, 看下面的代码, device-width将自动检测移动设备的屏幕宽度：

<meta name="viewport" content="width=device-width" />

　　viewport实战:

　　http://www.cnblogs.com/softlover/archive/2012/11/20/2779900.html

　　http://www.3lian.com/edu/2012/04-25/26248_2.html