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;显示