media响应式
1、什么是多媒体查询？
媒体查询是指：通过查询出访问我们网页的设备的媒体类型，来决定使用何种样式。
2、 作用—多媒体的解决问题是什么？
媒体查询的作用为：为了解决在不同媒体类型上，网页的排版，显示，样式等问题
3、 语法—多媒体查询的基本语法
@media not|only mediatype and (expressions) { CSS 代码…; }
关键字 媒体类型 媒体特征 此媒体类型对应的代码
4.、实例—多媒体查询使用实例
@media screen and (max-width:700px) {
body {
color: red;
font-size: 30px;
}
}
这句代码表示，当媒体类型为电脑屏幕，平板，智能手机等类型，且最大宽度为700px时，让字体变为30px大小，颜色变为红色。【也可以只给出媒体类型】
5、主要媒体类型（all print screen speech）
6、not/only
not/only关键字
使用媒体查询时，媒体类型前面可以加上 not/only关键字，含义如下
not:
not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only:
用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
媒体类型特征
写法： 以and与类型相连，多个特征也以and相连】每个特征都写在括号中，类似于css属性的键值对写法】一个括号里面只写一个特征】
实例
@media screen and (max-width:700px) {
body {
color: red;
font-size: 30px;
}
}
@media screen and (max-width:800px) and (min-width:700px) {
body {
color: red;
font-size: 30px;
}
}
特征列表
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 定义输出设备的屏幕可见宽度与高度的最小比率。