CSS媒体查询（media query）

前言：一直都有用到媒体查询，但都是只会一点皮毛，没有系统深入的学习过，最近再看一本书，主要讲的就是如何制作响应式web页面，所以今天就简单的做个总结。

---

一.什么是媒体查询
先看一段简单的媒体查询代码：

@media only screen and (max-width: 600px)
{
    .navside
    {
        display: none;
    }
}

上面代码的意思是：当页面尽在屏幕上显示（之所以强调屏幕，是因为除了screen还会有其他类型），且页面的宽度小于等于600px时将侧边栏隐藏。
1.媒体类型
如上代码中的screen。在w3c标准中规定了有4类媒体类型，分别是：all（所有设备），print（打印设备），speech（能够读出页面的屏幕阅读设备，通常供残疾人士使用），screen（除打印设备和屏幕阅读设备以外的所有设备），如果没有指定媒体类型，则默认类型为all
2.媒体特征表达式
如上代码中的max-width。在标准中规定的属性有：width，max-width（最大不超过），min-width（最小不超过），device-width（设备宽度），aspect-ratio（屏幕高宽比），color（颜色），resolution（屏幕的分辨率）等。
注意：媒体查询不仅可以写在样式表中，也可以直接写在样式外链中，如<link rel="stylesheet" media="only screen and (max-width:600px)" href="style.css">

---

二.媒体查询中的逻辑
1.and（与）关键字，如下代码：

@media (min-width:320px) and (orientation:landscape)
{
    .navside
    {
        display: none;
    }
}

在上述代码中，两个条件必须同时满足，即当屏幕宽度不小于320px且手机水平放置时执行
2.，（或），使用（，）分隔符表示或，代码如下：

@media (min-width:320px) ,(orientation:landscape)
{
    .navside
    {
        display: none;
    }
}

满足条件中的任何一个则执行
3.not（非），取反操作，代码如下

@media not all and (min-width:320px)
{
    .navside
    {
        display: none;
    }
}
意思是：not (all and (min-width:320px)),而非(not all) and (min-width:320px)

@media not all and (min-width:320px),(color:red)
{
    .navside
    {
        display: none;
    }
}
意思是：not (all and (min-width:320px)),(color:red)，而非not ((all and (min-width:320px),(color:red))

---

三.媒体查询中的策略
1.顺序

//策略1
@media (min-width:320px)
{
    .navside
    {
        display: none;
    }
}
//策略3
@media (min-width:800px)
{
    .navside
    {
        display: none;
    }
}
//策略3
@media (min-width:1024px)
{
    .navside
    {
        display: none;
    }
}

在上面的代码中，从后往前匹配，如果遇到width=1000px时，从后往前查找遇到策略2时停止匹配。
2.max-width和min-width，类似分支语句

 //if (width <= 320px)
@media (max-width:320px)
{
    .navside
    {
        display: none;
    }
}
//if (width >= 320px && width <= 1024px)
@media (min-width:320px) and (max-width: 1024px)
{
    .navside
    {
        display: none;
    }
}
//if (width >= 1024px)
@media (min-width:1024px)
{
    .navside
    {
        display: none;
    }
}

---

以上内容是关于媒体查询的一个总结，之后会附上一个小例子，希望在之后的开发中，运用的更加熟练。