在css2标准中就已经可以根据不同的媒介类型来设置不同的输出样式了。@media规则使开发者有能力在相同的样式表中，针对不同的媒介来使用不同的样式规则。这里主要介绍响应式设计最基础的技术：css3媒介查询
工具/原料
网页编辑器
浏览器
css3媒体查询
1、多媒体查询语法：@me蟠校盯昂dia not|only mediatype and (expressions) {旌忭檀祉 CSS 代码...;}not:not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。only:用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。all:所有设备例子：在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧。css部分：ul,li{list-style: none;padding:0;margin:0;} .div1{width: auto;} #ul1{ position: relative; margin:30px auto; } #ul1 li{ background:gainsboro; border:1px solid #d4d4d4; border-radius:4px; list-style-type:none; margin:4px; padding:2px; } @media screen and (min-width: 480px) { .div1 {width:200px;float:left;} #ul1 li{ background: cadetblue; color:#fff; } }html部分：<div class="div1"> <ul id="ul1"> <li>目录1</li> <li>目录2</li> <li>目录3</li> <li>目录4</li> <li>目录5</li> </ul></div>效果如图：
2、CSS3 多媒体类型（mediatype）all：用于所有多媒体类型设备print：用于打印机screen：用于电脑屏幕，平板，智能手机等。speech：用于屏幕阅读器例子：css部分：body { background-color: darkgray; } @media screen and (min-width: 480px) { body { background-color: lightsteelblue; } }html部分：<h1>重置浏览器窗口查看效果！</h1><p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>效果如图：
3、也可以在不同的媒体上使用不同的样式文件：<link rel="stylesheet" media="m髫潋啜缅ediatype and|not|only (expressions)" href="print.css">例子：css：media.cssbody{ background: lightskyblue; font-size: 16px;}media2.cssbody{ background-color: darkgray; font-size: 30px;}html：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>不同的媒体上使用不同的样式文件</title> <link rel="stylesheet" type="text/css" href="media.css" media="screen and (min-width:600px) and (max-width:900px)" > <link rel="stylesheet" type="text/css" href="media2.css" media="screen and (min-width:900px)" ></head><body><p>600~900像素之间的窗口应用样式</p></body></html>效果如图：
