rem适配布局---2. 媒体查询

2. 媒体查询

2.1 媒体查询是CSS3新语法

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

2.2 语法格式

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

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

2.2.1 mediatype查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

• all:用于所有设备
• print:用于打印机和打印预览
• screen: 用于电脑屏幕、平板电脑智能手机等（最常用）

2.2.2 关键字

关键字将媒体类型或者多个媒体特性连接到一起作为媒体查询的条件

• and:可以将多个媒体特性连接到一起，相当于“且”的意思。
• not:排除某个媒体类型，相当于“非”的意思，可以省略。
• only:指定某个特点的媒体类型，可以省略。

2.2.3 媒体特性

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解3个。注意要加小括号。

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

举例：

2.3 案例：根据页面宽度改变背景颜色

注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小是顺序来写，但是我们最喜欢的还是从小到大来写，这样代码更加简洁。

2.4 案例：媒体查询+rem实现元素动态大小变化

    
购物车

2.5 引入资源(现阶段了解)

当样式比较多的时候，我们可以针对不同的媒体使用不同的sylesheets(样式)，原理就是直接在link中判断设备的尺寸，然后引用不同的CSS文件。比如可以为大屏幕写一个样式，为小屏幕也写一个样式，然后在引入文件的时候对屏幕大小做出判断，判断引入大屏幕的样式还是小屏幕的样式。

语法规范：

举例：

    
1
    
2

05_style320.css

div {
    width: 100%;
    height: 100px;
}

div:nth-child(1) {
    background-color: pink;
}

div:nth-child(2) {
    background-color: skyblue;
}

05_style640.css

div {
    float: left;
    width: 50%;
    height: 100px;
}

div:nth-child(1) {
    background-color: pink;
}

div:nth-child(2) {
    background-color: skyblue;
}