最近在做公司官网，需要适配移动端，于是结合自己以前总结的知识，以及在网上找到的相关资料供大家参考。
举个栗子：
<link rel="stylesheet" media="screen and (max-width: 375px)" href="solution_schoolNet.css" />
此media属性值的意思是：当页页宽度小于或等于600px,就调用solution_schoolNet.css样式表来渲染页面。
media的语句中包含的内容：
1、screen：这个不用说大家都知道，指的是一种媒体类型；2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。
用css来表示：
@media screen and (max-width: 375px) {div {width:100%}}
常用媒体查询如下表所示：
下面我们一起来看看Media Queries的具体使用方式
一、最大宽度Max Width
<link rel="stylesheet" media="screen and (max-width:375px)" href="solution_schoolNet.css"/>
上面表示的是：当屏幕小于或等于375px时，将采用solution_schoolNet.css样式来渲染Web页面。
二、最小宽度Min Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="solution_smartCampus.css"/>
三、多个Media Queries使用
<link rel="stylesheet" media="screen and (min-width:414px) and (
