css3-@media查询讲解

定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置响应式设计的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

css语法

语法一:

外联CSS语法：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature

语法二:

@media mediatype and|not|only (media feature) { ... }
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature

实例：<style>
                @media all and (min-width:500px) { … }
          </style>

媒体类型

媒体类型：mediatype
all	    用于所有设备
screen    用于电脑屏幕，平板电脑，智能手机等
print	    用于打印机和打印预览
speech   应用于屏幕阅读器等发声设备
aural	    用于语音和声音合成器
braille	    应用于盲文触摸式反馈设备
embossed	用于打印的盲人印刷设备
handheld	用于掌上设备或更小的装置，如PDA和小型电话
projection	用于投影设备
tty	用于固定的字符网格，如电报和对字符有限制的便携设备
tv	用于电视和网络电视

关键字：and|not|only
and   用来连接条件，然后括号里就是一个媒体特征查询语句
not   用来排除某种媒体类型，即用于排除符合表达式的设备
only   用来限定某种媒体类型，可用来排除不支持媒体查询的浏览器
实例：
@media screen and (min-width: 500px) and (max-width : 800px)
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="red.css" type="text/css" /> 
<link rel="stylesheet" media="only screen and (max-width:240px)" href="w240.css" type="text/css" />