css3媒体查询
1、多媒体查询语法：
@media not|only mediatype and (expressions) { CSS 代码...;}
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备
例子：
在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧。
css部分：
ul,li{list-style: none;padding:0;margin:0;}
.div1{width: auto;}
#ul1{
position: relative;
margin:30px auto;
}
#ul1 li{
background:gainsboro;
border:1px solid #d4d4d4;
border-radius:4px;
list-style-type:none;
margin:4px;
padding:2px;
}
@media screen and (min-width: 480px) {
.div1 {width:200px;float:left;}
#ul1 li{
background: cadetblue;
color:#fff;
}
}
html部分：
<div class="div1">
<ul id="ul1">
<li>目录1</li>
<li>目录2</li>
<li>目录3</li>
<li>目录4</li>
<li>目录5</li>
</ul>
</div>
效果如图：
2、CSS3 多媒体类型（mediatype）
all：用于所有多媒体类型设备
print：用于打印机
screen：用于电脑屏幕，平板，智能手机等。
speech：用于屏幕阅读器
例子：
css部分：
body {
background-color: darkgray;
}
@media screen and (min-width: 480px) {
body {
background-color: lightsteelblue;
}
}
html部分：
<h1>重置浏览器窗口查看效果！</h1>
如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。
效果如图：
3、也可以在不同的媒体上使用不同的样式文件：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
例子：
css：
media.css
body{
background: lightskyblue;
font-size: 16px;
}
media2.css
body{
background-color: darkgray;
font-size: 30px;
}
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>不同的媒体上使用不同的样式文件</title>
<link rel="stylesheet" type="text/css" href="media.css" media="screen and (min-width:600px) and (max-width:900px)" >
<link rel="stylesheet" type="text/css" href="media2.css" media="screen and (min-width:900px)" >
</head>
<body>
600~900像素之间的窗口应用样式
</body>
</html>
效果如图：
