媒体查询

CSS3 Media Queries

媒体查询@media

两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min- 400px)">
意思是当屏幕的宽度大于等于400px的时候，应用styleA.css

在media属性里：
screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min- 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看相关的Media features部分

另一种方式，即是直接写在<style>标签里：
@media screen and (max- 600px) { /*当屏幕尺寸小于等于600px时，应用下面的CSS样式*/
.class {
background: #ccc;
}
}

media属性用于为不同的媒介类型规定不同的样式
screen 计算机屏幕（默认值）
tty 如打字机或终端等设备
tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection 放映机
handheld 手持设备（小屏幕、有限的带宽）
print 打印预览模式 / 打印页
braille 盲人用点字法反馈设备
aural 语音合成器
all 适合所有设备

多数媒体属性带有“min-”和“max-”前缀，用于表达“大于等于”和“小于等于”

常见屏幕宽度
≥1200px 大屏幕大桌面显示器
≥992px 中等屏幕桌面显示器
≥768px 小屏幕平板
<768px 超小屏幕手机

媒体查询示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style type="text/css">
        li{
            display: inline;
             200px;
            padding: 16px 30px;
            background-color: blueviolet;
        }

        @media screen and (max- 767px) {
            .aa{
                display: none;
            }
        }
        @media screen and (max- 826px) {
            .bb{
                display: none;
            }
        }
        @media screen and (max- 768px){
            .bb{
                display: inline;
            }
        }
        @media screen and (min- 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;显示