响应式web布局
通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。
媒体查询能够获取的值如下：
在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 |
手持的便携设备 |
|
|
文档打印用纸或打印预览视图模式 |
|
projection |
各种投影设备 |
|
screen |
彩色电脑显示器屏幕 |
|
speech |
语言和音频合成器 |
|
tty |
固定字母间距的网格的媒体，比如电传打字机和终端 |
|
tv |
电视机类型的设备 |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
