对于CSS2中 media type (媒体类型) 和 CSS3中 media query (媒体查询) 的相关知识的总结:

这篇文章是对于 CSS2 中 media type (媒体类型) 和 CSS3 中 media query (媒体查询) 的相关知识的总结:

media type (媒体类型)

• media type (媒体类型) 概念：

• media type (媒体类型) 属性：

• media type(媒体类型) 的几种声明使用方法:

//方法一:
    <link href="style.css" media="screen print" ...>
//方法二:
    <?xml-stylesheet media="screen" href="style.css"...>
//方法三:
    @import url("style.css") screen;
//方法四:
    <style media="screen">;					
        @import url("style.css");				
    </style>;
//方法五:
    @media screen{
        selector{rules}
    }

• media type (媒体类型) 的浏览器支持:

1. IE5.5/6/7 不支持在 @import 中使用媒体类型;
2. Safari/firefox 只支持 all , screen , print 三种类型(包括 iphone );
3. Opera 完全支持 ;
4. Opera mini 支持 handheld，未指定则使用 screen;
5. Windows Mobile 系统中的 IE 支持 handheld ，其它支持不明…

media query (媒体查询)

• media query (媒体查询) 概念:

可以将 media query 看成是 media type + css 属性判断。

1. 多个 css 属性判断可以用关键字 and 连接：其中 media type 可以省略，属性值也可以为空;
2. 针对多个媒体类型的 CSS 规则，可以用逗号来隔开;

• media query (媒体查询) 支持的属性:

        属性值                          值                                                         含义描述

---

1. color                           ---> 整数                                      ---> 每种色彩的字节数;
2. color-index                 ---> 整数                                      ---> 色彩表中的色彩数;
3. device-aspect-ratio    ---> 整数/整数                              ---> 宽高比例;
4. device-height             ---> length                                    ---> 设备屏幕的输出高度;
5. device-width              ---> length                                     ---> 设备屏幕的输出宽度;
6. grid                             ---> 整数                                        ---> 是否是基于格栅的设备;
7. height                          ---> length                                     ---> 渲染界面的高度;
8. monochrome               ---> 整数                                       ---> 单色帧缓冲器中每像素字节;
9. resolution                    ---> 分辨率(“dpi/dpcm”)                ---> 分辨率;
10. scan                            ---> Progressive interlaced no      ---> tv 媒体类型的扫描方式;
11. width                           ---> length                                     ---> 渲染界面的宽度;
12. orientation                   ---> Portrait/landscape no            ---> 横屏或竖屏;

---

• max 与 min 关键字:

用到的这两个关键词，他们是要配合支持它们的属性使用的，它们的意义与我们常用的 max-width 和 min-width 等类似。

1. width                         min-width                         max-width；
2. height                        min-height                        max-height；
3. device-width              min-device-width              max-device-width；
4. device-height             min-device-height            max-device-height；
5. aspect-ratio                min-aspect-ratio               max-aspect-ratio；
6. device-aspect-ratio    min-device-aspect-ratio    max-device-aspect-ratio；
7. color                           min-color                           max-color；
8. color-index                 min-color-index                  max-color-index；
9. Monochrome              min-monochrome              max-monochrome；
10. Resolution                  min-resolution                   max-resolution；

• not 和 only 关键字:

媒体类型还支持 not 和 only 关键字，它们可以用来更方便的定位某个媒体设备：

  ---> not：排除某种制定的媒体类型

@media not print and (color){}

  ---> only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器：

@media only screen and (color){}

• meta相关: