【学习打卡】第十一天 六个案例学会响应式布局

学习课程名称：六个案例学会响应式布局
章节名称：mediaquery媒体查询
讲师姓名：大谷

---

课程内容概述：

1. 什么是媒体查询
2. @media常用参数
3. 媒体查询其他引入方式

---

什么是媒体查询
媒体查询（Media Query）是CSS3新语法。

1. 使用@media查询，可以针对不同的媒体类型定义不同的样式
2. @media可以针对不同的屏幕尺寸设置不同的样式
3. 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
4. 目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询

语法规范
@media mediatype and|not|only (media feature){
css-code;
}

用@media开通 注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性，必须有小括号包含

mediatype查询类型
将不同的终端设备划分为不同的类型，称为媒体类型
all:用于所有设备
print:用于打印机和打印预览
screen:用于电脑屏幕、平板电脑、智能手机

mediatype关键字

关键字将媒体类型或多个特性连接到一起做为媒体查询的条件。
and：可以将多个媒体特性连接到一起，相当"且"于的意思
not：排除某个媒体类型，相当于"非"的意思，可以省略
only：指定某个特定的媒体类型，可省略

mediatype特性
width：定义输出设备中页面可见区域的宽度
min-width:定义输出设备中页面最小可见区域的宽度
max-width:定义输出设备中页面最大可见区域的宽度

可以让我们根据设备显示器的特性（如视口宽高、屏幕比例、设备方向：横向或纵向）为其设定CSS 样式， 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。 媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。 使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

---