移动前端――通过CSS3 Media Queries实现相应式布局

一、关于Media Queries模块

   

     Media Queries模块，该模块允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择用该使用的样式。

二、Media Queries的使用方法

    @media 设备类型 and （设备特性） ｛样式代码｝

        ――设备类型――常用all（所有设备）/screen(电脑显示器)/handheld（便携设备）

        ――设备特性――常用浏览器的宽度如：min-width:**px / max-width:**px；

三、关于safari

    由于safari在显示页面时是将窗口宽度作为980px进行显示的，因此在使用Media Queries模块时需在head内加入<meta name="viewport" content="width=device-width">，使页面按照相应的媒体类型样式显示。