media query和media type总结

第三种：@import方式

第四种：在style里为某些样式指定 media

@media speech {
    p{
        color: #ff0000
    }
}

注：若没有指定media，默认为all

媒体查询是通过不同的媒体类型和条件定义不同的样式表，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。也是media type的增强。

媒体查询包含一个媒体类型(media type) 以及一个到多个测试媒体特性(media feature)的表达式，表达式和媒体类型将根据实际情况计算得到true或者false。如果指定的媒体类型符合当前设备并且媒体特性表达式都为真，那当前媒体查询为。

@media screen and (min-width: 700px) and (orientation: landscape) {}
/*其中screen就是媒体类型，min-width: 700px是媒体特性表达式*/

and运算符 -- 用于结合多个媒体特性(media feature)到一个media query

@media screen and (min-width: 700px) and (orientation: landscape) {
    .name {
        color:red;
    }
}

当设备类型为screen，且viewport的宽度大于700px，并且设备可见区域宽度大于高度（横屏），三个条件都满足时，大括号内的样式才会生效。

逗号（,）运算符 -- 用于结合多个media query

@media (min-width: 700px), screen and (orientation: landscape) {
    .name {
        color:red;
    }
}

上面代表两种不同设备，一种all，一种screen，用逗号分隔。

not运算符 -- 用于对整个media query 取反，必须位于一个media query的开头

@media not all and (monochrome) {}

等价于：

@media not (all and (monochrome)) {}

注意：not 是对整个media query进行否定，不能对单个media feature否定

only运算符 --用来定某种特别的媒体类型

对于支持Media Query的设备来说，如果存在only关键字，Web浏览器会忽略only关键字，并直接根据后面的表达式应用样式文件。对于不支持Media Query的设备，但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

@media only screen and (min-width: 400px) and (max-width: 600px) {}

不支持media query但是支持media type的web浏览器，会省略后面的样式文件，上面的实例解释为：

@media only {}

支持media query 的web浏览器会省略only关键字，上面实例解释为：

@media screen and (min-width: 400px) and (max-width: 600px) {}

下面是一些媒体特性，不是全部

width -- 定义输出设备中的页面可见区域宽度

height -- 定义输出设备中的页面可见区域高度

device-width -- 定义输出设备的屏幕可见宽度

device-height -- 定义输出设备的屏幕可见高度

orientation -- 定义"height"是否大于或等于"width"。portrait代表是（竖屏），landscape代表否（横屏）

aspect-ratio -- 定义width与height的比率，可以设置min/max

device-aspect-ratio -- 定义device-width与device-height的比率。可以设置min/max。如常见的显示器比率：4/3, 16/9, 16/10

resolution -- 定义设备的分辨率。可以设置min/max。如：96dpi, 300dpi, 118dpcm

color -- 定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0。可以设置min/max

排他 （exclusive） 为确保在某一个条件下只有一个样式表生效，将查询条件严格划分，如下面：

@media (max-width: 400px) {
    html {
        background: red;
    }
}

@media (min-width: 401px) and (max-width: 800px) {
    html {
        background: green;
    }
}

@media (min-width: 801px) {
    html {
        background: blue;
    }
}

覆盖（overriding） 可以对元素设置相同优先级，使用样式顺序，通过覆盖，避免排他

@media (min-width: 400px) {
    html {
        background: red;
    }
}

@media (min-width: 600px) {
    html {
        background: green;
    }
}

@media (min-width: 800px) {
    html {
        background: blue;
    }
}

无线端优先（Mobile first） 默认样式假设为移动设备宽度，然后通过min-width控制扩展样式

html {
    background: red;
}

@media (min-width: 600px) {
    html {
        background: green;
    }
}

PC优先（desktop first） 默认以宽屏进行样式设置，通过max-width控制样式覆盖

html {
    background: red;
}

@media (max-width: 600px) {
    html {
        background: green;
    }
}

http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

https://segmentfault.com/a/1190000002812335

http://blog.csdn.net/ruoyiqing/article/details/39208707