溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)布局”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
Flexible Layout：彈性布局
Bootstrap：柵格布局
產(chǎn)品是做業(yè)務(wù)的，產(chǎn)品是為業(yè)務(wù)服務(wù)的?？蚣苣軡M足百分之九十幾的需求。
CSS1：display:block;
CSS2：display:table;
CSS3：display:flex; display:box; display:grid;
實(shí)踐案例，設(shè)計(jì)如下圖的頁(yè)面：
分析頁(yè)面：
整體是三行，header占整體頁(yè)面20%，main占60%，footer占20%。
響應(yīng)式布局，可隨著頁(yè)面大小自動(dòng)放大、縮小調(diào)整。
容器：flex container
頁(yè)面布局 —— 容器 ，容器中還可以放小容器。
局部：flex-direction:column
局部有橫向。
整體：flex-direction:row
整體是橫向布局。
整體頁(yè)面可以做到橫縱相交。
動(dòng)手實(shí)驗(yàn) —— Flex box layout
窄屏模式：Mobile First
手機(jī)優(yōu)先，因?yàn)楝F(xiàn)在移動(dòng)互聯(lián)網(wǎng)時(shí)代，使用手機(jī)看頁(yè)面的比例已經(jīng)超過PC，所以做頁(yè)面的時(shí)候先考慮Mobile Fierst。
手機(jī)和PC顯示最大的區(qū)別不是分辨率，而是顯示比例的區(qū)別。手機(jī)是窄屏模式、PC是寬屏模式。
頁(yè)面不需要做兩套，而是基于media query(媒介查詢)，自動(dòng)偵測(cè)是窄屏模式還是寬屏模式。
窄屏模式下main區(qū)域是橫向排列，寬屏模式下main區(qū)域內(nèi)容是縱向排列。
寬屏模式：
動(dòng)手實(shí)驗(yàn)
vscode里新建文件，擴(kuò)展名是html。
代碼編輯區(qū)輸入html選擇html5，此時(shí)vscode會(huì)自動(dòng)填寫html5的固定內(nèi)容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport">
給vscode安裝插件Live Server，裝好以后在html文件編輯區(qū)鼠標(biāo)右鍵調(diào)出菜單選擇“open with live server”即可迅速看到頁(yè)面顯示效果。
先做布局，再寫樣式。
<div class = "container"> <div class = "header"> header</div> <div class = "main"> <div class = "nav"> nav </div> <div class = "article"> article </div> <div class = "aside"> aside </div> </div> <divv class = "footer" > footer </div> </div> </body> </html>
做完的樣式如下：
編寫網(wǎng)頁(yè)使用編程工具Visual Studio Code，國(guó)外軟件推薦使用必應(yīng)搜索(英文版)。
接下來加樣式：<style>標(biāo)簽與</style>標(biāo)簽之間加樣式。
<style>
.container {
display: flex;
height: 100vh;
flex-direction: column;
}
.main {
display: flex;
flex: 1;
flex-direction: column;
}
.main .article {
flex: 1;
background-color: yellowgreen;
}
.main .nav,
.main .aside {
background-color: bisque;
}
.header,
.footer {
background-color: green;
height: 20vh;
}
</style>加了style后的效果
注意.container里面的描述height: 100vh; (高度百分百)、.header和.footer 里面的描述height:20vh;(高度20%)。寫網(wǎng)頁(yè)最好寫成百分比，不要寫成絕對(duì)值。寫絕對(duì)值無法縮放，寫成百分比時(shí)放大縮小頁(yè)面會(huì)自動(dòng)縮放調(diào)整。
媒體查詢，即判斷顯示設(shè)備，目前窄屏優(yōu)先(適配手機(jī))已完成，然后編寫代碼判斷是否寬屏，編寫寬屏優(yōu)先(適配PC)的代碼。
@media screen and (min-width:400px) {
.main {
flex-direction: row;
}
.main .nav,
.main .aside {
flex: 0 0 20vw;
}
}min-width:400px 表示當(dāng)屏幕寬度比大于等于400px時(shí)，切換布局方式。(老師開始設(shè)576，此時(shí)經(jīng)常不會(huì)切換到寬屏模式，觸發(fā)條件數(shù)字偏大)
以上是flex box布局模式。
推特出品的前端模板，老師推薦用bing國(guó)際版查官網(wǎng)https://getbootstrap.com/，在官網(wǎng)查資料。
(視頻資料顯示官網(wǎng)bootstrap版本是4.1.3，推斷該視頻是2年前出的)
實(shí)踐案例：
從bootstrap找到card模板：
<div class="card">
在head中導(dǎo)入bootstrap的鏈接
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
card復(fù)制2份，最終完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <div class="card" > <img class="card-img-top" src=".../100px180/" alt="card-img-cap"> <div class="card-body"> <h6 class="card-title">Card title</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card" > <img class="card-img-top" src=".../100px180/" alt="card-img-cap"> <div class="card-body"> <h6 class="card-title">Card title</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card" > <img class="card-img-top" src=".../100px180/" alt="card-img-cap"> <div class="card-body"> <h6 class="card-title">Card title</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </body> </html>
card效果1，直接復(fù)制后card是縱向排列成3個(gè)。
加了container會(huì)有留白和間距。(網(wǎng)頁(yè)設(shè)計(jì)一大重要技巧是合適的留白，整齊的留白和間距。)
<div class="container"> <div class="row">
container下面一行寫明布局是"row"，現(xiàn)在卡片是橫向排列了。注意：bootstrap布局優(yōu)先考慮的是手機(jī)優(yōu)先。
再調(diào)整style
<style>
body {
margin-top: 1em;
margin-left: 1em;
}
.mycard {
margin-right: 1em;
margin-bottom: 1em;
}
</style>marin-top指的是上邊距，marin-left指的是左邊距，marin-right指的是右邊距，marin-bottom指的是下邊距。
1em指的是當(dāng)前字體大小的一個(gè)字符高或?qū)挕?5px是指15個(gè)像素。
自定義了.mycard，指定右邊和下邊空一個(gè)字符間距。
給下方的3個(gè)card 添加 mycard約束。
注意畫面的層次感，背景不要用全白，例如京東很多頁(yè)面背景是灰色。
在body中添加background-color:#f4f4f4，不要使用gray，使用gray顏色太暗，#f4f4f4白中帶灰做背景恰好。
然后修改card頭部顯示的圖片，從必應(yīng)上搜索免費(fèi)圖片，將其連接加入src=""的雙引號(hào)中間。
調(diào)整整體邊距、卡片邊距、card寬度為14rem。
最終代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport">
最終效果：
使用模板的優(yōu)點(diǎn)是自動(dòng)適應(yīng)不同設(shè)備不同分辨率，當(dāng)屏幕寬度大時(shí)可以一行顯示3個(gè)card，屏幕小一些一行自動(dòng)調(diào)整為顯示2個(gè)card，屏幕再變窄時(shí)會(huì)自動(dòng)調(diào)整為一行顯示1個(gè)card。
“web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)布局”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼