很多时候，前期使用HTML+CSS设计的样式非常精美，但可能由于对方设备、浏览器的原因，比如分辨率达不到要求、色深达不到要求，最后导致用户浏览页面时的显示效果非常丑陋。为了解决这个问题，从CSS 2.1开始就定义了各种媒体类型（如显示器、便携设备、电视机等），允许设计者针对不同的媒体设备定义不同的CSS样式。
CSS 3强化了CSS 2.1的媒体类型支持，增加了media query功能，这种机制允许设计者在CSS样式中添加media query表达式，这种表达式不仅可以对媒体类型进行匹配，也可以对媒体分辨率、色深等各种细节进行匹配，因此可以针对不同类型、不同参数细节的媒体设备提供精确控制。
media query语法
media query的语法稍微有点复杂，语法格式如下：
@media not|only 设备类型 [and 设备特性]*
在上面语法格式中，[and设备特性]部分可以出现0～N次，通过使用多个[and设备特性]可以对多个设备特性进行匹配。
media query语法格式中的设备类型如下。
➢ all：适用于所有的设备类型。
➢ aural：适用于语音和音频合成器。
➢ braille：适用于触觉反馈设备。
➢ embossed：适用于凸点字符（盲文）印刷设备。
➢ handheld：适用于小型或手提设备。
➢ print：适用于打印机。
➢ projection：适用于投影图像，如幻灯片。
➢ screen：适用于计算机显示器。
➢ tty：适用于使用固定间距字符格的设备，如电传打字机和终端。
➢ tv：适用于电视类设备。
media query语法格式中的设备特性如下图所示：
针对浏览器宽度调整布局
下面开发一个网页，这个网页可以针对浏览器的宽度来调整布局，从而保证该页面向用户呈现较好的视觉效果。
下面定义了一个3栏布局的页面，这个页面在宽度大于1000px的浏览器中显示时，3个栏目将会并排显示；在宽度小于480px的浏览器中显示时，3个栏目会垂直排列显示。因此，页面需要针对这几种浏览器宽度分别定义不同的CSS样式。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 针对浏览器宽度调整布局 </title>
<style type="text/css">
/* 设置默认的CSS样式 */
#container{
text-align: center;
margin: auto;
width: 750px;
}
#container>div {
border: 1px solid #aaf;
text-align: left;
/* 设置HTML组件的width属性包括边框 */
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
background-color: #ffc;
padding: 5px;
}
div#left {
width: 300px;
height: 230px;
float: left;
}
div#main {
width: 450px;
height: 230px;
float: left;
/* 让该元素的右边不能出现float组件，即让后面的元素换行 */
clear: right;
}
div#right {
width: 750px;
float: left;
}
/* 设置当浏览器宽度大于920px时的CSS样式 */
@media screen and (min-width:1000px) {
#container{
text-align: center;
margin: auto;
width: 960px;
}
#container>div {
border: 1px solid #aaf;
/* 设置HTML组件的width属性包括边框 */
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
background-color: #ffc;
padding: 5px;
}
div#left {
width: 240px;
float: left;
height: 240px;
}
div#main {
width: 460px;
float: left;
height: 240px;
/* 让左右两边都可以出现float组件 */
clear: none;
}
div#right {
width: 260px;
float: left;
height: 240px;
}
}
/* 设置当浏览器宽度小于480px时的CSS样式 */
@media screen and (max-width:480px) {
#container{
text-align: center;
margin: auto;
width: 450px;
}
#container>div {
border: 1px solid #aaf;
/* 设置HTML组件的width属性包括边框 */
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
background-color: #ffc;
padding: 5px;
}
div#left {
width: 450px;
float: left;
height: 140px;
}
div#main {
width: 450px;
float: left;
height: 220px;
/* 让左右两边都不能出现float组件 */
clear: both;
}
div#right {
width: 450px;
float: left;
height: 160px;
}
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<h2>疯狂软件开班信息</h2>
<ul>
<li>2011年11月10日 已满已开班</li>
<li>2011年12月02日 爆满已开班</li>
<li>2012年02月08日 已满已开班</li>
</ul>
</div>
<div id="main">
<h2>疯狂软件介绍</h2>
疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/>
疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
</div>
<div id="right">
<h2>公司动态</h2>
<ul>
<li>《疯狂Java讲义》(第2版)上市</li>
<li>泰豪电网软件公司来校召开现场招聘会</li>
<li>疯狂学子赴武汉光谷软件园入职</li>
<li>新华南方来校现场招聘</li>
</ul>
</div>
</div>
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。