2018.12.07

十六、Media响应式
(1)概念–什么是多媒体查询？
媒体查询是指：通过css查询出访问我们网页的设备的媒体类型，来决定使用何种样式。
(2)作用–多媒体解决的问题是什么？
媒体查询的作用为：为了解决在不同媒体类型上，网页的排版，显示，样式等问题。
(3)媒体查询使用前的准备
在我们使用Media前，需要先来兼容移动设备的展示效果：

这段代码的几个参数解释： width = device-width：宽度等于当前设备的宽度 initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允许用户缩放到的最大比例（默认设置为1.0） user-scalable：用户是否可以手动缩放（默认设置为no,不允许） 如果不加此代码的话，在手机上可能不会根据类型应用css样式。 (4)语法--多媒体查询的基本语法。

@media not|only mediatype and (expressions) { CSS 代码…; }
关键字 媒体类型 媒体特征 此媒体类型对应的代码
(5)实例–多媒体查询使用实例。
@media only screen and (max-width:700px) {
body {
color: red;
font-size: 30px;
}
}
这句代码表示，当媒体类型为电脑屏幕，平板，智能手机等类型，且最大宽度为700px时，让字体变为30px大小，颜色变为红色。【也可以只给出媒体类型】
(6)主要媒体类型
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。
speech 用于屏幕阅读器
(7)not/only关键字
使用媒体查询时，媒体类型前面可以加上 not/only关键字，含义如下
not:
not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only:
用来指定某种特别的媒体类型。 @media only print（只能是打印设备）。
1.对于支持媒体查询的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字，并直接根据后面的表达式应用样式文件。
2.对于不支持媒体查询的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件或相关样式代码。
(8)媒体类型特征
写法：
1.以and连接媒体类型和特征
2.每个特征都写在括号中，一个括号里面只写一个特征，类似于css属性的键值对写法。
3.多个特征之间也以and相连。

实例

/* 设备宽度小于700px时，字体12px,蓝色 */
@media screen and (max-width:700px) {
body {
color: blue;
font-size: 12px;
}
}

/* 设备宽度大于700px，小于900px时，字体30px,红色*/
@media screen and (max-width:900px) and (min-width:700px) {
body {
color: red;
font-size: 30px;
}
}

/* 设备宽度大于900px，小于900px时，字体60px,黑色*/
@media screen and (min-width:900px) {
body {
color: black;
font-size: 60px;
}
}

(9)特征列表
height  定义输出设备中的页面可见区域高度。
min-height  定义输出设备中的页面最小可见区域高度。
max-height  定义输出设备中的页面最大可见区域高度。

width   定义输出设备中的页面可见区域宽度。
min-width   定义输出设备中的页面最小可见区域宽度。
max-width   定义输出设备中的页面最大可见区域宽度。

max-device-width    定义输出设备的屏幕最大可见宽度。
min-device-width    定义输出设备的屏幕最小可见宽度。
max-device-height   定义输出设备的屏幕可见的最大高度。
min-device-height   定义输出设备的屏幕的最小可见高度。

resolution  定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
max-resolution  定义设备的最大分辨率。
min-resolution  定义设备的最小分辨率。

aspect-ratio   定义输出设备中的页面可见区域宽度与高度的比率
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。

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

max-aspect-ratio    定义输出设备的屏幕可见宽度与高度的最大比率。
min-aspect-ratio    定义输出设备中的页面可见区域宽度与高度的最小比率。

max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。

(10)css2中的媒体查询
写法如下：通过媒体类型及其特征来决定到底使用哪个css文件
如：

解释 如果当前设备的媒体类型为screen ，且宽度为700px--800px;的话，那么就使用media.css文件。如果当前媒体类型匹配了多个样式，那么仍然是按照权重和就近原则来处理。

(11)媒体查询的简写和并写

1. 可以不写媒体类型（默认为all）,如下：

或 @media (min-width:700px) { body { color: blue; font-size: 80px; } }

2. 可以使用逗号来表示并列，如下

或

@media (min-width:700px) and (max-width:900px),screen and (max-width:500px) {
body {
color: blue;
font-size: 80px;
}
}

(12)CSS媒体查询–开发中如何确定不同设备宽度
直接使用响应式做的比较的好bootstrap的标准

/* 超小屏幕（手机，小于 768px） /
/ 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（新版的Bootstrap 是移动设备优先） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { … }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { … }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { … }

(13)多个媒体查询模块放置顺序
当有多个min-width时，小的放上面。
当有多个max-width时，大的放上面。

@media (max-width:700px) {
body {
color: blue;
font-size: 80px;
}
}

@media (max-width:1000px) {
body {
color: rgb(255, 0, 34);
font-size: 80px;
}
}