媒体类型（Media Query）
- 网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站，而媒体类型是允许你指定文件将如何在不同的媒体呈现。
- all(全部)、screen(屏幕)、print(页面打印或打印预览模式)是最常见的三种媒体类型。
- @media是CSS3中新引进的一个特性，被称为媒体查询（媒体查询可以根据设备的尺寸，查询出适配的样式）。
用法
1.link方法
通过link标签中的media属性来指定不同的媒体类型，如：
< link rel="stylesheet" type=" text/css" href="xx.css" media="screen" />
2.@import方式
- 外部式：
@import url(xx.css) screen;
- 内部式：
<head>
<style type=" text/css">
@import url(xx.css) all;
</style>
</head>
3.@media方式
- 外部式：
@media screen {
选择器{/*样式代码写这里…*/}
}
- 内部式：
<head>
<style type="text/css">
@media screen{
选择器{/*样式代码写这里…*/}
}
</style>
</head>
Media Queries的使用方法：
@media 媒体类型 and （媒体特性）{样式写这里}
- 使用Media Queries必须要使用
@media开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。 - 使用关键词
and将多个媒体特性结合在一起。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
- 媒体特性的书写方式 （媒体特性：值），如：
(max-width: 480px)
-
device-width：根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用min/max对应参数，如min-device-width或者max-device-width，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率。“iphone.css”样式适用于最大设备宽度为480px。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
响应式设计
概念：“Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。”
相关术语：
1.流体网格：将每个网格格子使用百分比单位来控制网格大小。
2.弹性图片：图片不设置固定尺寸，根据流体网格进行缩放，适应各种网格的尺寸。
3.媒体查询：根据用户终端设备匹配对应的样式。
4.屏幕分辨率：用户显示器的分辨率，针对浏览器使用的分辨率来适配对应的CSS样式。
5.主要断点：设备宽度的临界点，比如min-width和max-width，就是设置一个范围（主要断点和次要断点）来匹配调用样式。
用法
1.可视区域meta标签（视口 viewport）
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2.content属性值（可视区域）
（1）width：可视宽度（具体数字或者关键词device-width）
（2）height：可视高度（具体数字或者关键词device-height）
（3）initial-scale：页面首次被显示时，可视区域的缩放程度，取值为1.0时，页面按实际尺寸显示，无缩放。
（4）minimun-scale：可视区域的最小缩放程度，表示用户可以将页面缩小的范围，取值为1.0时，用户不能将页面缩小至实际尺寸以下。
（5）maximum：可视区域的最大缩放程度，表示用户可以将页面放大的范围，取值为1.0时，用户不能将页面放大至实际尺寸以上。
（6）user-scale：指定用户是否可以对页面进行缩放，设置yes（可以）或者no（不可以）。
