css3学习笔记（六）----Media Queries（媒体样式） 与Responsive（响应式）

1，媒体类型：其中Screen、All和Print为最常见的三种媒体类型。

值	设备类型
All	所有设备
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打印机
Handheld	便携设备
Print	打印用纸或打印预览视图
Projection	各种投影设备
Screen	电脑显示器
Speech	语音或音频合成器
Tv	电视机类型设备
Tty	使用固定密度字母栅格的媒介，比如电传打字机和终端

媒体类型引用方法：

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

2，Media Queries使用：

最大宽度：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}/*当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏*/

最小宽度：

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}/*当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px*/

多个媒体特性使用：

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}/*当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5*/

设备屏幕的输出宽度Device-Width:下面指的是“iphone.css”样式适用于最大设备宽度为480px

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

not关键词：排除某种媒体类型

@media not print and (max-width: 1200px){样式代码}

only关键词：指定某种媒体类型

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

3，常用实例

1024px显屏

@media screen and (max-width : 1024px) {样式写在这里}  

800px显屏

@media screen and (max-width : 800px) { 样式写在这里} 

640px显屏

@media screen and (max-width : 640px) {样式写在这里}

iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {样式写在这里}

iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {样式写在这里}

iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {样式写在这里}