響應(yīng)式布局是什么？如何實現(xiàn)響應(yīng)式布局？

更新時間:2021-07-12 來源:黑馬程序員瀏覽量:

IT培訓(xùn)班

響應(yīng)式網(wǎng)站中使用布局容器來實現(xiàn)控制頁面中每個元素的大小和布局變化，需要一個父級元素作為布局容器，來配合子級元素實現(xiàn)變化效果。其原理是，在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，然后改變里面的子元素的排列方式和大小，從而實現(xiàn)不同屏幕下，頁面布局和樣式發(fā)生變化。

在移動Web開發(fā)中，常見的響應(yīng)式布局容器尺寸劃分如表1所示。

表1 響應(yīng)式布局容器尺寸劃分

設(shè)備劃分	尺寸區(qū)間	寬度設(shè)置
超小設(shè)備（手機(jī)）	< 576px	100%
平板	≥576px	540px
桌面顯示器	≥768px	720px
大桌面顯示器	≥992px	960px
超大桌面顯示器	≥1200px	1140px

接下來通過案例演示如何使用媒體查詢，來根據(jù)常見屏幕尺寸進(jìn)行寬度設(shè)置，實現(xiàn)響應(yīng)式頁面布局。具體如例4-1所示。

【例4-1】

（1）創(chuàng)建C:\web\chapter04\demo03.html文件，具體代碼如下。

  <head>
   <meta name="viewport" content="width=device-width">
   <style>
    /* 1. 超小設(shè)備（小于576px）布局容器的寬度為100% */
    @media screen and (max-width: 575px) {
     .container {
      width: 100%;
     }
    }
    /* 2. 平板設(shè)備（大于等于576px）布局容器的寬度為540px */
    @media screen and (min-width: 576px) {
     .container {
      width:540px;
     }
    }
    /* 3. 桌面顯示器（大于等于768px）布局容器寬度為720px */
    @media screen and (min-width: 768px) {
     .container {
      width: 720px;
     }
    }
    /* 4. 大桌面顯示器（大于等于992px）布局容器寬度為960px */  
    @media screen and (min-width: 992px) {
     .container {
      width: 960px;
     }
    }
    /* 5. 超大桌面顯示器（大于等于1200）布局容器寬度為1140 */ 
    @media screen and (min-width: 1200px) {
     .container {
      width: 1140px;
     }
    }
    .container {
     height: 50px;
     background: #ddd;
     margin: 0 auto;
    }
   </style>
  </head>
  <body>
   <div class="container">布局容器</div>
  </body>
  </html>

上述代碼中，設(shè)置了一個類名為container 的div布局容器，并使用媒體查詢的方式在不同屏幕尺寸下對布局容器的寬度進(jìn)行設(shè)置。

（2）通過瀏覽器測試，觀察在不同窗口寬度下布局容器是否會相應(yīng)發(fā)生變化。頁面效果如圖1所示。