@media媒体查询以及屏幕自适应内容

@media的作用：媒体查询可以在指定的设备上使用对应的样式替代原有的样式。
即告诉浏览器，当满足某条件时，就调用该样式。
媒体查询可以用来检测viewport（视窗）的宽度与高度、设备的宽度与高度、横屏还是竖屏以及分辨率。

语法：
1、内联@media

@media not|only mediatype and (expressions) {...}

媒体查询由多媒体组成，可以包含一个或多个表达式，根据表达式条件判断是否成立，返回 true 或 false。若指定的多媒体类型匹配设备类型则返回查询结果为true，文档会在匹配的设备上显示指定样式效果。

也可以使用操作符not only and ，来限定条件。
and:表示并且，要求必须满足所有的表达式要求时，才能使用media定义样式
not: 不，表示除…外，即排除掉某些特定的设备的，如 @media not print（非打印设备）,not 针对的是一整条媒体查询语句，而非其中的某一个条件
only: 表示只有 仅仅，表示某一种的媒体类型设备。
对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
,多个条件设定使用逗号分隔，表手或者or，满足其中之一。

2、外链@media
可以在不同的媒体上使用不同的样式文件，使用link外联引入：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

css3中的媒体类型包含了print打印机、screen电脑屏幕、平板手机等、speech语音合成器等、all所有多媒体设备。all是默认的。

用@media screen实现屏幕自适应内容
在前面说到@media的作用就是告诉浏览器当满足某个条件时，就使用某个样式。
所以，利用这个特性，我们可以通过设置不同的样式，当条件改变时，也就是当屏幕大小改变时，内容样式进行了改变。
示例：

css代码：

body{background:blue;}/*宽度500px-800px之间+高度100px-400px之间 蓝色*/
@media screen and (max-width:500px){body{background:green;}}/*宽度小于500px时 绿色*/
@media screen and (min-width:800px){body{background:red;}}/*宽度大于800px时 红色*/
@media screen and (max-height:100px){body{background:yellow;}}/*高度小于100px时 黄色*/
@media screen and (min-height:400px){body{background:pink;}}/*高度大于400px时 粉色*/

html代码：

<p>效果演示，请缩小/扩大浏览器的窗口大小注意背景色的变化。逻辑如下：</p>
<p>/*宽度500px-800px之间+高度100px-400px之间 蓝色*/</p>
<p>/*宽度小于500px时 绿色*/</p>
<p>/*宽度大于800px时 红色*/</p>
<p>/*高度小于100px时 黄色*/</p>
<p>/*高度大于400px时 粉色*/</p>

效果图：
1、当高度大于400px时:整个屏幕背景颜色为粉色

2，高度小于100px时，为黄色。

3、当高度在100-400px之间，宽度大于800px时，为红色

4、宽度500px-800px之间+高度100px-400px之间 为蓝色

5、宽度小于500px，高度100px-400px之间 为绿色

根据上述代码不同条件不同颜色的改变，我们可以根据不同条件设置更多不同的样式，从而使得内容达到自适应的效果。

但是@media媒体查询必须放在“要重的写样式”之后才能生效
如果是引入.css,也要在“要重的写样式”文件之后