媒体查询
CSS3 Media Queries
媒体查询@media
两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
意思是当屏幕的宽度大于等于400px的时候，应用styleA.css
在media属性里：
screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是当屏幕的宽度大于或等于600小于或等于800时，应用styleB.css
另一种方式，即是直接写在<style>标签里：
@media screen and (max-width: 600px) { /*当屏幕尺寸小于等于600px时，应用下面的CSS样式*/
.class {
background: #ccc;
}
}
media属性用于为不同的媒介类型规定不同的样式
screen 计算机屏幕（默认值）
tty 如打字机或终端等设备
tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection 放映机
handheld 手持设备（小屏幕、有限的带宽）
print 打印预览模式 / 打印页
braille 盲人用点字法反馈设备
aural 语音合成器
all 适合所有设备
多数媒体属性带有“min-”和“max-”前缀，用于表达“大于等于”和“小于等于”
width | min-width | max-width
height | min-height | max-height
device-width | min-device-width | max-device-width
device-height | min-device-height | max-device-height
aspect-ratio | min-aspect-ratio | max-aspect-ratio
device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
color | min-color | max-color
color-index | min-color-index | max-color-index
monochrome | min-monochrome | max-monochrome
resolution | min-resolution | max-resolution
scan | grid
常见屏幕宽度
≥1200px 大屏幕 大桌面显示器
≥992px 中等屏幕 桌面显示器
≥768px 小屏幕 平板
<768px 超小屏幕 手机
媒体查询示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询</title>
<style type="text/css">
li{
display: inline;
width: 200px;
padding: 16px 30px;
background-color: blueviolet;
}
@media screen and (max-width: 767px) {
.aa{
display: none;
}
}
@media screen and (max-width: 826px) {
.bb{
display: none;
}
}
@media screen and (max-width: 768px){
.bb{
display: inline;
}
}
@media screen and (min-width: 820px) {
.aa.bb{
display: inline;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>首页</li>
<li>产品</li>
<li>服务</li>
<li class="aa">博客</li>
<li class="aa">新闻</li>
<li class="aa">客户</li>
<li class="aa">关于</li>
<li class="bb">帮助</li>
</ul>
</nav>
</header>
</body>
</html>
display: none; 隐藏
display: inline;显示
