媒体查询之响应式布局

1.媒体查询

媒体查询允许我们运行一系列测试，例如检测用户是否在显示器上进行网页访问,屏幕是否大于某个宽度或者某个分辨率等，根据测试结果,我们可以在不同的场景上应用不同的样式,或者运行不同的JavaScript脚本. 它也可以看成是浏览器提供的获取⽤户系统参数和设置的接⼝.

2.作用

1.网页可以根据不同的设备或窗口大小呈现出不同的效果

2.使用响应式布局可以使一个网页适配所有设备

3.响应式布局的关键就是媒体查询

4.通过媒体查询可以为不同的设备、设备的 不同状态来分别设置样式。

3.媒体类型

类型	解释
all	所有设备
braille	盲文
tty	传真
print	文档打印
tv	电视
screen	彩电屏幕
handheld	手持设备

4.媒体特性

属性	值	是否支持min/max	描述
color	整数	支持	每种颜色的字节数
color-index	整数	支持	色彩表的色彩数
device-aspect-ratio	整数	支持	宽高比例
device-height	length	支持	设备屏幕输出高度
device-width	length	支持	设备屏幕输出宽度
grid	整数	不支持	是否基于栅格的设备
height	length	支持	渲染界面的高度
width	length	支持	渲染界面的宽度
monochrome	整数	--	黑白（灰度）设备每个像素的比特数
orientation	--	--	设备处于横屏还是竖屏
resolution	--	--	设备的分辨率
scan	--	--	打印输出设备(打印机等)

5.使用方法和引入

@media 关键词 媒体类型 and (媒体特性) {
    选择器 {
        css属性    
    }
}

外链式CSS引入

<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css">

6.重点属性 : width、height、scan

• 宽度（width）

宽度描述了输出设备渲染区域的宽度

向宽度大于800px的可视区域的设备应用样式表

宽度媒体查询的属性在实际开发中使用还是比较普遍的

<style>
@media (min-width:800px) {
    .box {
        height: 100px;
        width: 100px;
        background: red;
    }       
}
</style>
<div class="box"></div>

• 高度（height）

高度描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度

向高度大于800px的可视区域的设备应用样式表

<style>
@media (min-height:800px) {
    .box {
        height: 100px;
        width: 100px;
        background: orange;
    }       
}
</style>
<div class="box"></div>

• 扫描（scan）

扫描描述了电视输出设备的扫描过程

值： progressive | interlace

媒体查询包含了一个CSS2已有的媒介类型(或称为媒体类型)和CSS3新增的包含一个或多个表达式的媒体属性，这些媒体属性会被解析成真或假

当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假， <link>标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）

<link rel="stylesheet" href="style.css" media="print">

<div class="box"></div> 

@media并不是'print'，所以媒体查询为假。但是，style.css文件依然被下载,所以这样使用媒体查询会增加资源请求;

7.媒体查询逻辑操作符

操作符not、and、only和逗号, , 可以用来构建复杂的媒体查询条件

• and操作符

and操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真

注意 : 在不使用not或only操作符的情况下，媒体类型是可选的，默认为all

满足横屏以及最小宽度为700px的条件应用样式表，如下：

@media all and (min-width: 700px) and (orientation: landscape) { ... }

由于不使用not或only操作符的情况下，媒体类型是可选的，默认为all，所以可以简写为：

@media (min-width: 700px) and (orientation: landscape) { ... }

• or操作符

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

满足最小宽度为700像素或是横屏的手持设备应用样式表:

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

• not操作符

not操作符用来对一条媒体查询的结果进行取反

• only操作符

only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="only"，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="screen"，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式

所以，在使用媒体查询时，only最好不要忽略;