响应式web布局

通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

 

媒体查询能够获取的值如下：

•设备的宽和高device-width，device-heigth显示屏幕/触觉设备。

•渲染窗口的宽和高width，heigth显示屏幕/触觉设备。

•设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。

•画面比例aspect-ratio点阵打印机等。

•设备比例device-aspect-ratio-点阵打印机等。

•对象颜色或颜色列表color，color-index显示屏幕。

•设备的分辨率resolution。

 

在CSS3中的Media Queries模块中支持对外部样式表的引用， 使用方法类型如下代码：

 @import url(color.css) screen and (min-width: 1000px);             

或：

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />   /*使用link导入外部css文件*/

简写：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)  href="link.css" />

   上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

在样式表中内嵌@media的代码示例如下所示：

 @media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) { 样式代码 }

简写：

@media screen and (max-width:640px)  { 样式代码 }

 在上面的示例代码中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，样式代码为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。

 

可用的设备类型

   在CSS中嵌入“@media”的方式， 开头必须书写“@media”,然后指定设备类型（上例使用screen代表电脑显示器）。CSS中定义了10种设备类型

可以指定的值	设置类型
all	所有设备
braille	盲文，即盲人用点字法触觉回馈设备
embossed	盲文打印机
handheld	手持的便携设备
print	文档打印用纸或打印预览视图模式
projection	各种投影设备
screen	彩色电脑显示器屏幕
speech	语言和音频合成器
tty	固定字母间距的网格的媒体，比如电传打字机和终端
tv	电视机类型的设备