PC端适配、CSS3媒体查询

设计稿为：1920px

作为PC端来讲展示官网一般做1920，其中版心位置可能在1190-1400之间，比较常用的是1190 &1200 &1380&1400 在适配的时候对于一些屏幕较小的设备来说直接可以缩小版心两边的位置大小，如果作为后台管理系统页面可以选择隐藏侧边栏，或者修改页面布局，比如原来用一行排4个icon 修改后一行两个来达到布局的目的

定义和使用

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

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

一、设置Meta标签

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

<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，因为我们不希望用户放大缩小页面） 

二、加载兼容文件JS

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

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

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

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

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

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

四、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 */

<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min-width: 400px)">

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

<link rel="stylesheet" type="text/css" href="B.css" media="screen and (min-width: 600px) and (max-width: 800px)">

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

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

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

  body {

    background: #ccc;

  }

}

3.  常见的格式

/* 手机, 小于768px */

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

  ...

}

/* 平板, 大于768px, 小于992px */

@media screen and (min-width: 768px) and (max-width: 992px) {

  ...

}

/* >=1440的设备屏幕(小显示22寸：1440) */

@media screen and (min-width: 992px) and (max-width: 1440px) {

  ...

}

/* >=1680的设备屏幕(24寸：1980) */

@media screen and (min-width: 1441px) {

  ...

}