Media Query（媒介查询）

一、媒体类型

all 所有媒体
screen 彩屏设备
print 用于打印机和打印预览
speech 应用于屏幕阅读器等发声设备
braille 应用于盲文触摸式（已废弃 ）
embossed 用于打印的盲人印刷设备（已废弃 ）
projection 用于投影设备（已废弃 ）
tty 不适用像素的设备（已废弃 ）
tv 电视（已废弃 ）

二、关键字

and 并且 连接条件
not 用来排除某种制定的媒体类型
only (限定某种设备)某种特定的媒体类型

三、媒体特性

( width:600px ) 宽
( max-width:600px ) 最大宽度 <=600
( min-width: 480px ) 最小宽度 >=480
( orientation:portrait ) 竖屏
( orientation:landscape ) 横屏

四、媒体查询

1、方式一 媒体查询： @media [not|only] mediatype [and] (media feature) { CSS-Code; }

@media screen  and (min-width:400px) and  (max-width:500px)  {.bo x {margin: 0 auto;}} 

//值与值之间需要有空格

2、 方式二： @import url(‘index.css’) [not|only] mediatype [and] (media feature) [and] (media feature); 需顶行写

@import url(style.css) screen and (min-width:1000px);

3、方式三：样式引入

<link rel="" type="" href="A.css"  media="screen and (min-width: 800px)"> 
<link rel="" type="" href="B.css"  media="screen and (min-width: 600px) and (max-width: 800px)"> 
<link rel="" type="" href="C.css"   media="screen and (max-width: 600px)"> 
<link rel='stylesheet' media='all and (orientation:portrait)' hre f='portrait.css'>
<link rel='stylesheet' media='all and (orientation:landscape)' hr ef='landscape.css'> 
<link rel='stylesheet' type='text/css" media="print" href='prin t.css'  /> 

五、viewport视口

视口的作用：在移动浏览器中，当页面宽度超 出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示

width  [pixel_value | device­width] 例如width = 640   
height  [pixel_value | device­height]   
initial-scale  初始比例   
minimum-scale  允许缩放的最小比例   
maximum-scale  允许缩放的最大比例  
user-scalable  是否允许缩放 （yes || no 或 1 | 0）

兼容
Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高 级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的 标准模式渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge">

使用以下代码强制 IE 使用 Chrome Frame 渲染

<meta http-equiv="X-UA-Compatible" content="chrome=1"> 

提示 IE 用户安装 Google Frame
最佳的兼容模式方案，结合考虑以上两种：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

六、设置视口

做响应式网站的时候，一定要在页面头部加入如下的声明：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">