媒体查询

@media 针对不同媒体类型可以定制不同的样式规则。 例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。

@media not|only mediatype and (expressions) { CSS 代码…; }

媒体类型

image.png

媒体查询案例1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.     *{
  10.         margin:0;padding:0;
  11.     }
  12.     .box{
  13.         width:200px;
  14.         height:200px;
  15.         background:green;
  16.     }
  17.     /* 
  18.        当屏幕的宽度小于600px的时候，我就让.box 这个盒子背景颜色pink
  20.      */
  22.      @media screen and (max-width:600px){
  23.          .box{
  24.              background:pink;
  25.          }
  26.      }
  27.      @media screen and (min-width:700px){
  28.          .box{
  29.              background:gold;
  30.          }
  31.      }
  32.      /* 大于等300 小于等于800 */
  33.     @media screen and (min-width:300px) and (max-width:800px){
  35.     }
  37.     </style>
  38. </head>
  39. <body>
  40.     <div class="box"></div>
  41. </body>
  42. </html>

媒体查询案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     /* 需求：小于768px的时候显示一个颜色
           大于768到1200 显示一个颜色
           大于1200的时候显示一个颜色 
    */

    *{
        margin:0;padding:0;
    }
    .box{
        width:200px;
        height:200px;
        background:green;
    }
    @media screen and (max-width:768px){
       .box{
           background:pink;
       }
    }
    @media screen and (min-width:769px) and (max-width:1200px){
        .box{
           background:gold;
       }
    }

    @media screen and (min-width:1201px){
        .box{
           background:darkseagreen;
       }
    }
    </style>
</head>
<body>
     <div class="box"></div>
</body>
</html>

媒体查询案例3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,ol{
            list-style: none;
        }

        .box>li{
          width:12.5%;
          height:50px;
          text-align: center;
          line-height: 50px;
          border:1px solid lightgreen;
          float:left;
          box-sizing:border-box;
        }

        /* 大于等于1200 的时候显示8个
           大于等于900 小于1200的时候显示4个
           大于等于768px 小于900的时候显示2个
           小于768px 的时候显示一个

         */

        @media screen and (min-width:1200px){
            .box>li{
                width:12.5%;
            }
        }

        @media screen and (min-width:900px) and (max-width:1199px){
            .box>li{
                width:25%;
            }
        }

        @media screen and (min-width:768px) and (max-width:899px){
            .box>li{
                width:50%;
            }
        }

        @media screen and (max-width:767px){
            .box>li{
                width:100%;
            }
        }



    </style>
</head>
<body>
   <ul class="box">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
   </ul>
</body>
</html>

@media 华为官网项目