Media Queries详解

iPhone4

Pad

android

/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-241px) and (max-device-360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-361px) and (max-device-480px)" href="android480.css" type="text/css" />
我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

not关键字

only关键字

only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。

其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，
因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。

其他

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
<link rel="stylesheet" media="(min- 701px) and (max- 900px)" href="medium.css" type="text/css" />
另外还有使用逗号（，）被用来表示并列或者表示或，如下
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-480px), screen and (min-960px)" />
上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

设备屏幕的输出宽度Device Width

多个Media Queries使用

一、最大宽度Max Width

@media引入

这种引入方式和@import是一样的，也有两种方式：

样式文件中使用：

@media screen{
选择器{
属性：属性值；
}
}

在<head>>/head>中的<style>…</style>中调用：

<head>
<style type="text/css">
@media screen{
选择器{
属性：属性值；
}
}
</style>
</head>

@import方式引入

@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在<head></head>中的<style>…</style>中引入，单这种使用方法在ie6-7都不被支持如

样式文件中调用另一个样式文件：

@import url("css/reset.css") screen;
@import url("css/print.css") print;

在<head></head>中的<style>…</style>中调用：

<head>
<style type="text/css">
@import url("css/style.css") all;
</style>
</head>

xml方式引入

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

link方法引入

<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />