一，媒体类型
媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。
在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示：
| 值 | 设备类型 |
|---|---|
| All | 所有设备 |
| Braille | 盲人用点字法触觉回馈设备 |
| Embossed | 盲文打印机 |
| Handheld | 便携设备 |
| 打印用纸或打印预览视图 | |
| Projection | 各种投影设备 |
| Screen | 电脑显示器 |
| Speech | 语音或音频合成器 |
| Tv | 电视机类型设备 |
| Tty | 使用固定密度字母栅格的媒介，比如电传打字机和终端 |
二，媒体引入
在实际中媒体类型有近十种之多，实际之中常用的也就那么几种，不过媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种
1，link
link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示。
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
2，@import
@import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。
@importurl(reset.css) screen;
@importurl(print.css) print;
在<head>中的<style>标签中引入媒体类型方法。
<head>
<style type="text/css">
@importurl(style.css) all;
</style>
</head>
3，@media
@media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。
- 在样式文件中引用媒体类型：
@media screen {
选择器{/*你的样式代码写在这里…*/}
}
- 使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。
<head>
<style type="text/css">
@media screen{
选择器{/*你的样式代码写在这里…*/}
}
</style>
</head>
多条限制语句：@media 媒体类型and (特性), 媒体类型 and (特性) and (特性){你的样式}例如
<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
三，相应布局
1，meta标签
语法：<meta name=”viewport” content=”” />
content值：
image
在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。meta标签被称为可视区域meta标签，其使用方法如下。
在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下：
<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
2，不同设备的分辨率设置
- 1024px显屏
@media screen and (max-width : 1024px) {
/* 样式写在这里 */
}
- 800px显屏
@media screen and (max-width : 800px) {
/* 样式写在这里 */
}
- 640px显屏
@media screen and (max-width : 640px) {
/* 样式写在这*/
}
- iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* 样式写在这 */
}
- iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* 样式写在这 */
}
- iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* 样式写在这 */
}
