CSS3--媒体查询@media

什么是媒体

    所谓媒体也就是媒介，在CSS中代指各种设备。他们有很多类型(media type)，如下：

类型	描述
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯
screen	彩色电脑屏幕
speech	演讲
tty	固定字母间距的网格的媒体，比如电传打字机
tv	电视

怎样使用
媒体查询有几种声明方式媒体类型

<link href="style.css" media="screen print" ... 

<?xml-stylesheet media="screen" href="style.css"... 

<style media="screen"> 
    @import url("style.css"); 
</style>

@import url("style.css") screen; 

@media screen{ 
    selector{rules} 
} 

---

媒体查询

什么又是媒体查询呢？媒体查询的作用？
    media query是CSS 3对media type的增强，事实上我们可以将media query看成是media type+css属性判断。我们使用一些方式去查询媒体的类型，以及媒体现在的状态。然后我们就可以根据查询的结果，针对不同的情况定义不同的样式。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

---

CSS语法

移动设备使用时需要在文件引入

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0，user-scalable=no">
//注释
width=device-width //宽度等于设备的宽度
initial-scale  //初始缩放比例
maximum-scale  //最大的缩放比
minimum-scale  //最小缩放比
user-scalable  //用户是否可以手动缩放

语法

CSS写法，插入的是代码块

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

也可以使用下面的方式，根据查询结果直接引入外部的文件

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

其中

【not 】操作符用来对一条媒体查询的结果进行取反。not 关键字仅能应用于整个查询，而不能单独应用于一个独立的查询

@media not all and (monochrome) { ... }
等同于
@media not (all and (monochrome)) { ... }

【and 】操作符用来把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时，结果才为真。

@media (min-width: 700px) { ... }   //这里的media type相当于all ，表示在媒体宽度 >=700px 时有效

@media (min-width: 700px) and (orientation: landscape) { ... }  //这一段表示媒体宽度 >=700px,且为横屏时有效

@media tv and (min-width: 700px) and (orientation: landscape) { ... }  //表示只有在电视上，且宽度>=700，横屏

【only 】操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。若使用了 not 或 only 操作符，必须明确指定一个媒体类型

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

【逗号】你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。

@media (min-width: 700px), handheld and (orientation: landscape) { ... } //宽度>=700,或者是横屏的手持设备上有效

媒体属性	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

参考资料

---

SCSS语法

语法与css相同，只是可以嵌套，@media中还可以嵌套。还可以使用插值#{$prop}

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

CSS与SCSS的区别在于，CSS的选择器样式必须在媒体查询体内，SCSS则可以嵌套在选择器样式之内，并可以使用SCSS本身的一些特性。

CSS写法

@media screen and (min-width:720px) and (min-height:960px){
    .header{
        background-color: red;
    }
}

SCSS写法

@media screen {
    .header{
        //...
        @media (min-width:720px) and (min-height:960px){
            background-color:red;
        }
    }
}