转屏兼容神器：Media Query和matchMedia

[fengma1992]

Media Type

先让我们一起来了解一下media type，在css2中就支持media type。平时我们在写代码时，可能不太在意，但你应该见到过如下写法：

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

Media Type 类型

实际上screen就是一种media type，目前media type有以下类型（摘自网上）:

设备名称	指代
all	匹配所有设备
braille	匹配触觉反馈设备
embossed	凸点字符印刷设备
handheld	手持设备（尤其是小屏幕，有限带宽，不过注意：现在的Android，iPhone都不是Handheld设备，他们都是screen设备。所以，不要试图用handheld来识别iphone或者ipad,android等设备）PSP,NDS这种规格一般可以叫作Handheld，不过没有测试过，如有疏漏还请指正）
print	打印机设备
projection	投影仪设备
screen	彩色计算机显示器设备
speech	语音合成器设备
tty	栅格设备（终端，或者电传打字机）
tv	电视设备

Media Type 常用用法

media type常用用法，除了放在link标签中，还可以有如下几种用法:

（1）放在link标签中

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

（2）放在style标签中

    <style media="screen">
        .cont{
            background: red;
        }
    </style>

（3）写在style样式中

    <style>
    @media screen{
        .cont{
            background: red;
        }
    }
    </style>

（4）写在import中

    @import url("style.css") screen;

Media Query

media query是CSS 3对media type的增强，可将media query理解决为query条件的增强，可以对设备特性进行检验，那media query可以看作是 设备+特性+逻辑式 的结合。

Media Query设备特性

media type的设备类型media query均支持，同时它又增加了一些设备特性，如下表（摘自网上）：

媒体特性	说明/值	可用媒体类型	接受min/max
width	长度正数值(单位一般为px下同)	视觉屏幕/触摸设备	是
heigth	长度正数值	视觉屏幕/触摸设备	是
device-width	长度正数值	视觉屏幕/触摸设备	是
device-heigth	长度正数值	视觉屏幕/触摸设备	是
orientation	设备手持方向(portait横向/landscape竖向)	位图介质类型	否
aspect-ratio	浏览器、纸张长宽比	位图介质类型	是
device-aspect-ratio	设备屏幕长宽比	位图介质类型	是
color	颜色模式（例如旧的显示器为256色）	整数	视觉媒体
color-index	颜色模式列表整数	视觉媒体	是
monochrome	整数	视觉媒体	是
resolution	解析度	位图介质类型	是
scan	progressive逐行扫描/interlace隔行扫描	电视类	否
grid	整数，返回0或1	栅格设备	否

Media Query逻辑关键字

media query支持的逻辑关键字主要有:“only”“and”“not”和“，”。

• only:限定某种设备类型。
• and：逻辑与，连接设备名与选择条件、选择条件1与选择条件2.
• not：排除某种设备。
• 逗号，设备列表。

Media Query常见形式

结合设备，设备特性及逻辑关键字，media query主要有以下几种形式

    @media 设备类型 {   //设备
    }

    @media (only|not) 设备类型 {    //设备与逻辑关键字结合
    }

    @media  (only|not) 设备类型 and (设备特征表达式) {   //设备、设备特征与逻辑关键字结合
    }

    @media (设备特征表达式) | (设备特征表达式) |.... {  //设备特征与逻辑关键字结合
    }

    @media (only|not) 设备类型 and (设备特征表达式), (only|not) 设备类型 and (设备特征表达式) { 
     //设备特征与逻辑关键字结合
    }

常见的Media Query表达式

用css3 media query可以很好的实现响应式设计，以下列出几种常见的表达式

(1)Smartphones (portrait and landscape)

    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    	/* CSS Styles */
    }

(2)Smartphones (landscape)

    @media only screen and (min-width : 321px) {
    	/* CSS Styles */
    }

(3)Smartphones (portrait)

    @media only screen and (max-width : 320px) {
    	/* CSS Styles */
    }

(4)iPads (portrait and landscape)

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    	/* CSS Styles */
    }

(5)iPads (landscape)

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    	/* CSS Styles */
    }

(6)iPads (portrait)

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    	/* CSS Styles */
    }

(7)iPhone 4

    @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
    	/* CSS Styles */
    }

(8)Desktops and laptops

    @media only screen and (min-width : 1224px) {
    	/* CSS Styles */
    }

Javascript window.matchMedia方法

css3为我们提供了很强大的media query，而我们时常需要在js中动态的知道什么时候某个状态满足了。CSS Object Model（CSSOM）Views规范增加了对JavaScript操作CSS media query的原生支持，它在window对象下增加了matchMedia()方法。

MediaQueryList对象

你可以传入一个CSS media query然后返回一个MediaQueryList对象。这个对象包括两个属性：matches，布尔值数据，表示CSS media query是否与当前的显示状态匹配；media对应传入的参数字符串。如下：

    var mediaQueryList = window.matchMedia("screen and (max-width:480px)");
    console.log(mediaQueryList.media); //"screen and (max-width:480px)"
    console.log(mediaQueryList.matches); //true or false

MediaQueryList对象监听器

当然为了有效监听这个变化，MediaQueryList对象还为我们提供了addListener和removeListener

    var match = window.matchMedia("(orientation:portrait)");
    match.addListener(function(mql){
    	if (mql.matches) {

    	}else {
        }
    });

当视图状态发生改变时，监听器对应的函数就会执行，而对应的MediaQueryList对象也会传入。用这个方式吗，你可以让你的JavaScript可以很快地响应布局变化，并且不需要用轮询的方式。另外关于media query的实现原理一直不太清楚，什么时候media query就生效的，比如说转屏，是否是只要当前屏幕width或height发生改变时就去查询media query估计就待看看webkit源码才能清楚了。