大屏幕下
    image.png
    小屏幕下
    image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Document</title>
    10.   <style>
    11.     * {
    12.       margin: 0;
    13.       padding: 0;
    14.     }
    16.     .container {
    17.       height: 500px;
    18.       width: 750px;
    19.       margin: 0 auto;
    20.     }
    22.     .container ul li {
    23.       float: left;
    24.       background-color: pink;
    25.       width: 93.75px;
    26.     }
    28.     li {
    29.       list-style: none;
    30.     }
    33.     @media screen and (max-width:767px) {
    34.       .container {
    35.         width: 100%;
    36.       }
    38.       .container ul li {
    39.         width: 33.33%;
    40.       }
    42.     }
    43.   </style>
    44. </head>
    46. <body>
    47.   <div class="container">
    48.     <ul>
    49.       <li>导航栏</li>
    50.       <li>导航栏</li>
    51.       <li>导航栏</li>
    52.       <li>导航栏</li>
    53.       <li>导航栏</li>
    54.       <li>导航栏</li>
    55.       <li>导航栏</li>
    56.       <li>导航栏</li>
    57.     </ul>
    58.   </div>
    59. </body>
    61. </html>