媒体查询漫谈——@media Queries

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

media query能够获取的值有：

• 设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
• 渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
• 设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。
• 画面比例aspect-ratio点阵打印机等。
• 设备比例device-aspect-ratio-点阵打印机等。
• 对象颜色或颜色列表color，color-index显示屏幕。
• 设备的分辨率resolution。

　语法结构及用法：

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{rules}

在link中使用@media:

<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" />
上面使用中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) {rules}

在以上例子中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，rules为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。

　可用设备名参数：

　逻辑关键字：

　　

　

　可用设备名参数：

　　

往往我们还有配合一些css的初始设置：

/* 禁用iPhone中Safari的字号自动调整 */
html {
	-webkit-text-size-adjust: none;
}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
/* 设置图片视频等自适应调整 */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
	width: 100%;
	height: auto;
}

　　一定记得在head标签中加上<meta name="viewport" content="width=device-width; initial-scale=1.0">
　　meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明

　　

参数设置∶

• • width – viewport的宽度
  • height – viewport的高度
  • initial-scale – 初始的缩放比例
  • minimum-scale – 允许用户缩放到的最小比例
  • maximum-scale – 允许用户缩放到的最大比例
  • user-scalable – 用户是否可以手动缩放

最后对于在IE浏览器中不支持media query的情况，我们可以使用Media Query JavaScript来解决，只需要在页面头部引用css3-mediaqueries.js即可。示例：
　　

<!--[if lt IE 9]>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script> <![endif]-->

摘抄自觉唯网。