在css2标准中就已经可以根据不同的媒介类型来设置不同的输出样式了。@media规则使开发者有能力在相同的样式表中，针对不同的媒介来使用不同的样式规则。

这里主要介绍响应式设计最基础的技术：css3媒介查询

多媒体查询语法：

@media 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部分：

效果如图：

CSS3 多媒体类型（mediatype）

all：用于所有多媒体类型设备

print：用于打印机

screen：用于电脑屏幕，平板，智能手机等。

speech：用于屏幕阅读器

例子：

css部分：

body {

background-color: darkgray;

}

@media screen and (min-width: 480px) {

body {

background-color: lightsteelblue;

}

}

html部分：

重置浏览器窗口查看效果！

如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。

效果如图：

也可以在不同的媒体上使用不同的样式文件：

例子：

css：

media.css

body{

background: lightskyblue;

font-size: 16px;

}

media2.css

body{

background-color: darkgray;

font-size: 30px;

}

html：

600~900像素之间的窗口应用样式

效果如图：