媒体查询器（转）@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的作品展示。