CSS媒体查询

一.CSS媒体查询概念：

1.css媒体查询允许我们基于浏览器网站的设备的特性来应用不用的样式申明，比如通过视口的宽度

2.操作方式：

对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，

如果表达式结果为假，媒体查询内的CSS将被忽略

3.常用名词：

（1）@media：

以@media开头来表示这是一条媒体查询语句，紧跟在@media后面的是一个或多个表达式，可以判别为真或假

（2）screen：

在创建媒体查询时，必须以媒体类型（此处为screen）作为第一个表达式

相对应的有：print（打印机）、braille（盲文）、或者all（全部）等其他类型

（3）and：

and是一个关键字，表达式有多个表达式，screen是第一个表达式，and后为另一个表达式。

需前后表达式都为真时，整条查询结果才为真；

与and对应的关键字有：or、not

（4）（min-width：150px）：

所有表达式都应包含在括号内，除非它只是一个单词的媒体类型表达式（如screen、print等）

min-表示大于等于，max-表示小于等于

（5）{ }：

在花括号里面的内容表示整条媒体查询结果为真的CSS样式

二.操作代码实例：

1.需要实现效果：尺寸变色

根据屏幕尺寸改变背景颜色：

宽度<500 红色；

宽度在500-8000 绿色；

宽度在800-1000 蓝色；

宽度>1000 紫色

2.代码示例：

	 <style>
  		  @media screen and (max-width: 500px) {
       		 body{
          		  background-color: red;
        		}
   		 }
   		 @media screen and (min-width: 500px) and (max-width: 800px) {
      		  body{
         		   background-color: green;
        		}
   		 }
   		 @media screen and (min-width: 800px) and (max-width: 1000px) {
      		  body{
           		 background-color: blue;
       		 }
   		 }
   		 @media screen and (min-width: 500px) {
      		  body{
          		  background-color: purple;
       		}
   		 }
		</style>