码云 63. CSS3 Media Queries媒体类型
随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的 Web 页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用 CSS3 中的 Media Queries 模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面让用户有一个更好的体验。
Media Queries
Media Queries 是 CSS3 新增加的一个模块功能，其最大的特色就是通过 CSS3 来查询媒体，然后调用对应的样式。其实这个功能在 CSS2.1 中就有出现过，只不过那个时候此功能并不强大，我们最常见的就是给打印设备添加打印样式。随着时代的变化，这个模块功能越来越强大。
在彻底的了解 Media Queries 我们需要了解其中的两个重要部分，第一个是媒体类型，第二个是媒体特性。下面的内容我们简单的来了解这两个部分：
一、媒体类型
媒体类型（Media Type）在 CSS2 中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。
在 CSS2 中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C 总共列出了 10 种媒体类型。如下表所示：
| 值 | 设备类型 |
| All | 所有设备 |
| Braille | 盲人用点字法触觉回馈设备 |
| Embossed | 盲文打印机 |
| Handheld | 便携设备 |
| 打印用纸或打印预览视图 | |
| Projection | 各种投影设备 |
| Screen | 电脑显示器 |
| Speech | 语音或音频合成器 |
| Tv | 电视机类型设备 |
| Tty | 使用固定密度字母栅格的媒介，比如电传打字机和终端 |
其中 Screen、All 和 Print 为最常见的三种媒体类型。
在实际中媒体类型有近十种之多，实际之中常用的也就那么几种，不过媒体类型的引用方法也有多种，常见的有：link 标签、@import和 CSS3 新增的@media几种：
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" />
@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>
@media 方法
@media是 CSS3 中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。
1. 在样式文件中引用媒体类型：
@media screen {
选择器{/*你的样式代码写在这里…*/}
}
2. 使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。
<head>
<style type="text/css">
@media screen{
选择器{/*你的样式代码写在这里…*/}
}
</style>
</head>
微信
支付宝码云笔记 » 63. CSS3 Media Queries媒体类型
