1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    9.     <style>
    10.         .box{
    11.             width: 300px;
    12.             height: 300px;
    13.             background-color: red;
    14.         }
    16.         @media screen and (max-width:768px) {
    17.             .box{
    18.                 background-color: blue;
    19.             }          
    20.         }
    22.         @media screen and (min-width:768px) and (max-width:996px) {
    23.             .box{
    24.                 background-color: aqua;
    25.             }
    26.         }
    28.         @media screen and (min-width:996px) {
    29.             .box{
    30.                 background-color: rgb(59, 202, 125);
    31.             }
    32.         }
    33.     </style>
    34. </head>
    35. <body>
    37.     <div class="box"></div>
    38. </body>
    39. </html>

    根据设备屏幕大小展示相应内容