媒体查询（Media Query)

媒体查询( Media Query )是CSS3新语法,是样式:
语法规范：

@media mediatype and|not|only (media feature) {
	CSS-Code;
}
// 1.用@media开头；
// 2.mediatype媒体类型；
// 3.关键字and not only
// 4.media feature媒体特性，必须有小括号包含

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

all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

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

媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格：

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

// 意思是：在屏幕上 并且 最大宽度是500像素 大括号里面是设置样式
@media screen and (max-width:500px) { }

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

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

@media screen and (max-width:499) {
	body {
		background-color:red;
	}
}
@media screen and (min-width:500px) {
	body {
		background-color:green;
	}
}
@media screen and (min-width:800) {
	body {
		background-color:blue;
	}
}

媒体查询+ rem实现元素动态大小变化
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化
案例：

@media screen and (min-width:300px) {
	html {
		font-size:50px;
	}
}
@media screen and (min-width:600px) {
	html {
		font-size:100px;
	}
}
.car {
	height:1rem;
	font-size:.5rem;
	background-color:green;
	text-algin:center;
	line-height:1rem;
	color:#fff;
}
<div class="car">购物车</div>

引入资源：、

<link rel = "stylesheet" href=".css" media =" screen and (min-width:px) >