首頁技術(shù)文章正文

響應(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è)備(手機)                   < 576px                  100%                           
平板≥576px540px
桌面顯示器≥768px720px
大桌面顯示器≥992px960px
超大桌面顯示器≥1200px1140px


接下來通過案例演示如何使用媒體查詢,來根據(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所示。

1626079866292_21.jpg

圖1 布局容器效果






猜你喜歡:

CSS中px、em、rem有什么區(qū)別和不同?

rem是什么?和em單位有什么區(qū)別?

什么是媒體查詢?怎樣使用媒體查詢?

黑馬程序員前端與移動開發(fā)培訓(xùn)

分享到:
在線咨詢 我要報名
和我們在線交談!