媒体查询器（转）@media screen and

CSS3 Media Queries 让网页更好的支持移动设备
发表于 2012 年 2 月 1 日

CSS3的Media Queries可以查询设备的屏幕尺寸颜色等信息，我们就可以根据不同的设备来写CSS，让网页在不同设备上有更好的用户体验。本站做了一些尝试，有兴趣的朋友可以缩放网页窗口看下效果。下面简单介绍一下基本用法：

/* 基本语法 */
@media screen and (min-width:1024px) and (max-width:1280px){
body{padding:1em;}
}

/* 常用类型 */
类型    解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print    文档打印或打印预览模式
projection 项目演示，比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体，比如电传打字机
tv 电视

screen一般用的比较多，下面是我自己的尝试，列出常用的设备的尺寸，然后给页面分了几个尺寸的版本。

/* 常用设备 */
设备    屏幕尺寸
显示器    1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

1280 > 1024 > 960 > 800 >768 > 640

/* 根据上述尺寸简单的分了几个页面版本 */
@media screen and (min-width:1280px){
body{ 适合较大的台机显示器或更大 }
}

@media screen and (min-width: 800px) and (max-width: 1280px) {
body{ 适合一般的台机显示器或笔记本 }
}

@media screen and (max-width: 800px) {
body{ 适合一般的平板电脑或智能手机 }
}

国际惯例：IE5.5/6/7是不支持media query的，所以我也把这种不支持利用了起来，尝试去区分IE和非IE浏览器的样式，不知道是否合理？！

@media screen and (min-width: 0px) {
body{ IE goodbye }
}

我是通过屏幕尺寸来简单的区分页面样式，如果你想细分样式你可以参考一下内容。

/*Google的iPhone横屏样式*/
@media screen and (max-height:300px){
body{ iPhone 横屏 }
}

/*android手机的多分辨率*/
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
body{ for Android }
}

/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
body{ for Android }
}

/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
body{ for Android }
}

/* device-aspect-ratio 特定屏幕长宽比例 */

/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
body{ }
}

/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
body{ }
}

/* for 480px*800px width screen */
@media only screen (device-aspect-ratio:5/3){
body{ }
}

推荐个工具《protofluid模拟多款移动终端浏览体验》 http://mediaqueri.es/是一个国外的网站，上面有许多使用Media Queries的作品展示。