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) {样式写在这里}