CSS3媒体查询

定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

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

 

一、设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

这段代码的几个参数解释：

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

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

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

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

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

 

二、加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

 

三、设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：

 

四、media 属性：

（1）all——用于所有设备 

（2）print —— 用于打印机和打印预览 

（3，常用）screen——用于电脑屏幕，平板电脑，智能手机等。 

（4）speech——应用于屏幕阅读器等发声设备

（5）and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

（6）(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中

（7） 在 media 中：  min-width (大于)， max-width (小于)

 

五、用法

1. 直接在link中判断设备的尺寸，然后引用不同的css文件

/* 当屏幕的宽度大于等于400px的时候，应用 A.css */

 

/* 当屏幕的宽度大于600 小于800px时，应用B.css */

2. 直接写在 style 标签里或css文件中

/* 当屏幕尺寸小于600px时，应用下面的CSS样式 */

@media screen and (max-width: 600px) { 

  body {

    background: #ccc;

  }

}

3. 前端响应式布局 Bootstrap 屏幕参数

4.  常见的格式

/* 手机, 小于768px */
@media screen and (max-width: 768px) { 
  ...
}

/* 平板, 大于768px, 小于992px */
@media screen and (min-width: 768px) and (max-width: 992px) {
  ...
}

/* 小桌面, 大于992px, 小于1200px */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  ...
}

/* 大桌面(标配), 大于1200px */
@media screen and (min-width: 1200px) {
  ...
}