CSS3学习教程Media Queries.doc

CSS3学习教程:MediaQueries
CSS3的新特性:MediaQueries如果只是想简单了解MediaQueries，推荐参考CSS3MediaQueries。CSS2.1定义了Media的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过时的电视机等等。而MediaQueries的引入，其作用就是允许添加表达式用以确定媒体的情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备，以此加强体验。所以MediaQueries和CSS优化没有关系，甚至是矛盾的。引用CSS3MediaQueries里的直观的DEMO，当浏览器宽度改变时，应用的CSS发生变化。而这些，原本需要JavaScript的控制才能做到。Web移动化的趋势越加明显。虽然国内受到很多制约，但是这种浪潮却无法阻挡。前段时间jQuery宣布mobile项目，也加速了这种变化。MediaQueries不久的将来应该就会被更多的使用，以更好的支持新兴设备比如iPad。事实上，jQuery甚至有MediaQueries的插件。看看MediaQueries做了什么一个三栏布局，在屏幕变窄的情况下，变成1栏布局，甚至是消除多余两栏而只留下通常的内容的第2栏。MediaQueries是如何工作的？先看看link标签的写法：
<linkrel="stylesheet"type="text/css"href="swordair.css"media="screenand(min-width:400px)"
media="screenand(min-width:400px)"的意思就是当屏幕的宽度大于等于400px的时候，应用此条CSS。在media属性里：
screen是媒体类型里的一种，CSS2.1定义了10种媒体类型
and被称为关键字，其他关键字还包括not(排除某种设备)，only(限定某种设备)
(min-width:400px)就是媒体特性，其被放置在一对圆括号中。完整的特性参看相关的Mediafeatures部分
媒体特性共13种，可以说是一个类似CSS属性的集合。但和CSS属性不同的是，媒体特性只接受单个的逻辑表达式作为其值，或者没有值。并且其中的大部分接受min/max的前缀，用来表示大于等于/小于等于的逻辑，以此避免使用&lt;和&gt;这些字符。一个MediaQuery包含一种媒体类型，如果媒体类型没有指定，那么就是默认类型all，比如：
<linkrel="stylesheet"type="text/css"href="example.css"
media="(max-width:600px)">
一个MediaQuery包含0到多个表达式，表达式又包含0到多个关键字，以及一种媒体特性，比如：
<linkrel="stylesheet"type="text/css"href="example.css"
media="handheldand(min-width:20em)and(max-width:50em)">
逗号(,)被用来表示并列，表示或者。比如下面的例子表示此CSS被应用于宽度小于20em的手持，或者宽度小于30em的屏幕：
<linkrel="stylesheet"type="text/css"href="example.css"
media="handheldand(max-width:20em),screenand(max-width:30em)">
not关键字用来排除符合表达式的设备，比如：
<linkrel="stylesheet"type="text/css"href="example.css"
media="notscreenand(color)">
再看些其他例子(不准确，只是用来说明)：
<linkrel="stylesheet"type="text/css"href="styleA.css"
media="screenand(min-width:800px)">

<linkrel="stylesheet"type="text/css"href="styleB.css"
media="screenand(min-width:600px)and(max-width:800px)">

<linkrel="stylesheet"type="text/css"href="styleC.css"
media="screenand(max-width:600px)">
上面将设备分成3种，分别是宽度大于800px时，应用styleA，宽度在600px到800px之间时应用styleB，以及宽度小于