1. 概念


  2. CSS媒体查询允许我们基于浏览器网站的设备的特性来应用不同的样式申明,不吐通过视口的宽度
  3. 操作方式
    对设备提出询问(称作表达式)开始,如果表达式结果为真,媒体查询中的CSS被应用,如果表达式结果为假,媒体查询中的CSS将被忽略
  4. 常用名词
    ① ​@media 以@media开头来表示这是一条媒体查询语句
    紧跟在@media后面的是一个或者多个表达式,可以判别为真或假
    ② ​screen 在创建媒体查询时,必须以媒体类型(此处为screen)作为第一个表达式
    相对应的有 : print(打印机)、braille(盲文)或者all(全部)等其他类型
    ③ ​and and是一个关键字,表示有多个表达式,screen是第一个表达式,and后为另一个表达式
    需前后表达式都为真时,整条查询结果才为真(也就是"且"的意思)
    与and相对应的关键字有 : or、no等
    ④ ​(min-width:200px) 所有的表达式都应包含在括号内,除非它是只有一个单词的媒体类型表达式(如 : screen、print等)
    前缀min-表示"至少",即"大于等于"的意思
    前缀max-表示"至多",即"小于等于"的意思
    ⑤ ​{} 花括号里面的内容表示整条媒体查询结果为真实的CSS样式

2. 实操

​尺寸变色 :​ 根据屏幕的尺寸改变背景颜色


  2. 宽度 < 500 红色
  3. 500 ≤ 宽度 ≤ 800 绿色
  4. 800 ≤ 宽度 ≤ 1000 蓝色
  5. 宽度 大于1000 紫色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*媒体查询*/
        @media screen and (max-width: 500px){
              body{
                  background-color: red;
              }

              #box{
                  font-size: 20px;
                  color: green;
              }
        }

        @media screen and (min-width: 500px) and (max-width: 800px){
             body{
                background-color: green;
             }

             #box{
                font-size: 40px;
                color: red;
             }
        }

        @media screen and (min-width: 800px) and (max-width: 1000px){
            body{
                background-color: blue;
            }

            #box{
                font-size: 60px;
                color: purple;
            }
        }

        @media screen and (min-width: 1000px){
            body{
                background-color: purple;
            }

            #box{
                font-size: 80px;
                color: #fff;
            }
        }
    </style>
</head>
<body>

<!--
要求
    根据屏幕的尺寸改变背景颜色:
      宽度 < 500  红色
      宽度在 500 - 800  绿色
      宽度在 800 - 1000 蓝色
      宽度 >1000 紫色
-->
<div id="box">不断变色</div>
</body>
</html>

运行效果:

CSS：媒体查询_媒体查询

CSS：媒体查询_html_02

CSS：媒体查询_html_03

CSS：媒体查询_html_04