更新時(shí)間:2021-07-12 來源:黑馬程序員 瀏覽量:
響應(yīng)式網(wǎng)站中使用布局容器來實(shí)現(xiàn)控制頁面中每個(gè)元素的大小和布局變化,需要一個(gè)父級(jí)元素作為布局容器,來配合子級(jí)元素實(shí)現(xiàn)變化效果。其原理是,在不同屏幕下,通過媒體查詢來改變這個(gè)布局容器的大小,然后改變里面的子元素的排列方式和大小,從而實(shí)現(xiàn)不同屏幕下,頁面布局和樣式發(fā)生變化。
在移動(dòng)Web開發(fā)中,常見的響應(yīng)式布局容器尺寸劃分如表1所示。
表1 響應(yīng)式布局容器尺寸劃分
設(shè)備劃分 | 尺寸區(qū)間 | 寬度設(shè)置 |
---|---|---|
超小設(shè)備(手機(jī)) | < 576px | 100% |
平板 | ≥576px | 540px |
桌面顯示器 | ≥768px | 720px |
大桌面顯示器 | ≥992px | 960px |
超大桌面顯示器 | ≥1200px | 1140px |
【例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è)置了一個(gè)類名為container 的div布局容器,并使用媒體查詢的方式在不同屏幕尺寸下對(duì)布局容器的寬度進(jìn)行設(shè)置。
(2)通過瀏覽器測試,觀察在不同窗口寬度下布局容器是否會(huì)相應(yīng)發(fā)生變化。頁面效果如圖1所示。
圖1 布局容器效果