媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由 媒体类型和一个或多个检测媒体特性的条件表达式组成。
媒体查询中可用于检测的媒体特性有 width 、 height 和 color 等。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备。
响应式设计需要使用媒体查询，如果没有CSS3的媒体查询模块，就不能针对设备特性（如视口宽度）设置特定的CSS样式定制显示效果。
一、如何写媒体查询
（1） 可以直接在link中判断设备的尺寸，然后引用不同的css文件
- 在上面的例子中
all是媒体类型里的一种。
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备);
(min-width: 1024px) 就是媒体特性，其被放置在一对圆括号中。- 常用的屏幕范围：
<=767px 手机
>=768px 平板
>=1024px 电脑（2）也可以直接写在style标签里
@media all and (min-width:1024px){/*样式*/}二、媒体类型
| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
三、媒体的特性
仅列出几个常用的媒体特性
| 值 | 描述 |
|---|---|
| device-height | 定义输出设备的屏幕可见高度。 |
| device-width | 定义输出设备的屏幕可见宽度。 |
| height | 定义输出设备中的页面可见区域高度。 |
| max-device-height | 定义输出设备的屏幕可见的最大高度。 |
| max-device-width | 定义输出设备的屏幕最大可见宽度。 |
| max-height | 定义输出设备中的页面最大可见区域高度。 |
| max-width | 定义输出设备中的页面最大可见区域宽度。 |
| min-device-width | 定义输出设备的屏幕最小可见宽度。 |
| min-device-height | 定义输出设备的屏幕的最小可见高度。 |
| min-height | 定义输出设备中的页面最小可见区域高度。 |
| min-width | 定义输出设备中的页面最小可见区域宽度。 |
| scan | 定义电视类设备的扫描工序。 |
| width | 定义输出设备中的页面可见区域宽度。 |
手机自适应
写在HTML文件<head>标签里。
<meta name="viewport ，content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>- name="viewport" 指视口
- width=device-width——宽度等于当前设备的宽度
- initial-scale=1.0——初始的缩放比例（默认为1）
- maximum-scale=1.0——允许用户缩放到得最大比例（默认为1）
- user-scalable=no——用户不能手动缩放
强制性兼容
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">IE浏览器兼容（IE5 IE6）：
[if !IE]
[endif]
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
