1. 什么是媒体查询

根据设备显示器的特性设置特定的CSS样式。由一个或多个检测媒体特性的条件表达式组成。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

2.使用。

（1）

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

 如果宽度小于300px改变背景颜色。 如果换成min-width 则是 大于300px再改变。

（2）可以根据不同的媒体使用不同的样式文件

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="http://www.mamicode.com/mystylesheet.css">

 3.常用属性

宽高比（aspect-ratio）

值：<ratio>

媒体： media/visual, media/tactile
是否接受 min/max 前缀：是

描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。

@media screen and (min-aspect-ratio: 1/1) { ... }

设备宽高比（device-aspect-ratio）

值：<ratio>
媒体：media/visual, media/tactile
是否接受 min/max 前缀：是

描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

设备高度/高度（device-height）(device-width)

值：<length>
媒体：media/visual, media/tactile
是否接受 min/max 前缀：是

描述了输出设备的高度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

方向（orientation）

值：landscape | portrait
媒体：media/visual
是否接受 min/max 前缀：否

指定了设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式。

@media all and (orientation: portrait) { ... }

分辨率（resolution）

值： <resolution>
媒体： bitmap
是否接受 min/max 前缀：是

指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。

@media print and (min-resolution: 300dpi) { ... }

参考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

其他：

兼容一动设备的展示效果

    1.<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• width = device-width：宽度等于当前设备的宽度

• initial-scale：初始的缩放比例（默认设置为1.0）  

• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）    

• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）   

• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

      2.<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

让IE的文档模式永远都是最新的，chrome=1如果有的用户电脑里面装了这个chrome的插件，

就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，

不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果

3.<meta name="format-detection" content="telephone=no" />

      iphone则手机号码不被显示为拨号链接

4.ios设备对meta定义的私有属性：（可以添加至主屏幕）
      <meta name="apple-mobile-web-app-capable" content="yes" />
5.<meta name="apple-mobile-web-app-status-bar-style" content="black" />
       在web app应用下状态条（屏幕顶部条）的颜色；
       默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
       若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

css媒体查询