響應(yīng)式布局已經(jīng)不是什么新鮮事物了，但使用的場景卻在變少，因?yàn)楝F(xiàn)在web程序變得愈發(fā)豐富和復(fù)雜，而產(chǎn)品對移動端的重視也超過了pc端，如果僅用響應(yīng)式布局實(shí)現(xiàn)適配，代碼的復(fù)雜度和兼容性都難以維護(hù)，并且很容易造成代碼冗余（比如媒體查詢的多余代碼）。開發(fā)成本和另開發(fā)一款程序接近，因此，獨(dú)立開發(fā)出一款針對移動端的web程序已近變成了很多公司最佳方案。

那么響應(yīng)式布局就無用武之地了？也不是，當(dāng)我們只是開一款功能單一的展示性程序時(shí)，如靜態(tài)頁面，那么響應(yīng)式布局可能是最優(yōu)選。所以響應(yīng)式布局開始從最流行的方案變成一種折中方案。

接下來就講講如何設(shè)計(jì)一個(gè)簡單的響應(yīng)式布局。

響應(yīng)式布局的幾個(gè)主要因素：

• viewport：
  

響應(yīng)式布局本來是要適配移動端和pc端的，但viewport的存在讓針對移動端的設(shè)置都失去了效果，所以第一步就是讓viewport失去效果：

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>

至于viewport具體解釋，大家可以看下這個(gè)：此像素非彼像素。

• 媒體查詢（@media）設(shè)置斷點(diǎn)：
  

響應(yīng)式布局最主要的手段便是媒體查詢，通過媒體查詢設(shè)置斷點(diǎn)，可以為各種屏幕寬度的設(shè)備提供對應(yīng)樣式。斷點(diǎn)的設(shè)置一般可以設(shè)置為三種類型，如手機(jī)（<=480px），平板（480-720px），桌面電腦（>=1024px），這當(dāng)然是大概的設(shè)置，如果想更加具體點(diǎn)，可以拖動瀏覽器屏幕，以適應(yīng)不同的寬度，選擇開始變形的那個(gè)尺度作為斷點(diǎn)即可。媒體查詢的使用：

在樣式表中使用：

@media (min-width: 481px) and (max-width:768px) {/*具體操作*/ }復(fù)制代碼

在連接時(shí)調(diào)用：

<link href="styles.css" rel="stylesheet" media="(max-width:480px)">復(fù)制代碼

使用@import導(dǎo)入：

@import url(styles.css) (max-width:480px)

具體的使用同學(xué)們可以看看MDN的教程。

• 使用流式，浮動?xùn)鸥癫季?#xff1a;
  

響應(yīng)式布局最常見的就是在pc端使用多欄布局（柵格），因?yàn)闁鸥癫季趾芊奖阍诓煌聊辉O(shè)備中進(jìn)行增刪或者移動從而實(shí)現(xiàn)各種大小屏幕的適配（如小屏幕就一欄，而大屏幕就有三欄），每欄的寬度用流式布局（有時(shí)也叫彈性布局，就是width使用百分比）進(jìn)行適應(yīng)，因?yàn)椴煌聊坏膶挾雀鳟?。然后使用浮動進(jìn)行橫排。最外層包裹元素一般加個(gè)max-width，防止pc大屏太寬，導(dǎo)致頁面內(nèi)容跨度過大，造成閱讀困難。大概的代碼：

<main><aside></aside><article></article><aside></aside> </main> <style>main{max-width:1200px;}aside{float:left;width: 20%;}article{float:left;width: 60%;} </style>復(fù)制代碼

然后根據(jù)斷點(diǎn)判斷屏幕大小，對每一欄清除浮動，刪減或者移至下方。由于我們是桌面設(shè)備優(yōu)先的，所以媒體查詢的是移動端大小，（當(dāng)然也可以移動端優(yōu)先，反過來就是了）大概代碼：

@media (max-width:481px) {aside {float: none;width: auto;}article{float: none;width: auto;} }復(fù)制代碼

是不是很簡單，這就是所謂的響應(yīng)式布局了，當(dāng)然代碼我是極其簡化的，應(yīng)該還有很多細(xì)節(jié)上的修飾。除了流式，浮動?xùn)鸥癫季?#xff0c;還有flex布局，table布局等等都是可以實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的。具體看情況使用。接下來講講一些注意事項(xiàng)：

響應(yīng)式布局的一些問題：

• 重置盒子模型：
  

web瀏覽器的盒子模型默認(rèn)是不把邊框和內(nèi)邊距計(jì)算在內(nèi)容區(qū)的width中的（IE低版本除外），當(dāng)使用流式布局時(shí)，就是百分比設(shè)置欄寬時(shí)，會造成干擾，如第一欄的width是60%，第二欄是40%，本來是一行內(nèi)剛好放得下，但如果某一欄設(shè)置邊框或者內(nèi)邊距后，整體寬度就被加大，第二欄就會被擠下去。所以要設(shè)置box-sizing：border;將邊框和內(nèi)邊距計(jì)算進(jìn)內(nèi)容區(qū)的width中，即60%中包含了邊框和內(nèi)邊距。當(dāng)然不嫌麻煩的話，也可以用css的cale函數(shù)，不過這會造成性能問題，不建議使用。

• HTML代碼的順序：
  

要注意HTML代碼的順序，因?yàn)楹芏鄷r(shí)候我們的主內(nèi)容區(qū)是放到中間的，如：

<aside></aside> <article></article> <aside></aside>復(fù)制代碼

而在移動端時(shí)它應(yīng)該放到最上面，可由于代碼的順序關(guān)系，清除浮動后，它是按順序放到中間去了，（具體看上圖）。為了增強(qiáng)用戶體驗(yàn)，讓移動端的用戶第一眼就能看到主要內(nèi)容，而不用下拉，所以HTML編碼時(shí)，應(yīng)該讓主內(nèi)容區(qū)放到最上層，要浮動時(shí)，加個(gè)外層，讓主內(nèi)容區(qū)和相鄰側(cè)邊分別浮動到兩邊即可。大概代碼：

<div><article></article><aside></aside> </div> <aside></aside>復(fù)制代碼div{float:left;width: 80%; } div article{float:right;width: 75%; } div aside{float:left;width: 25% } aside{float:left;width: 20% }復(fù)制代碼

• 圖片和視頻的大小：
  

圖片也要用百分比，不然會溢出布局之外，一般用max-width：100%，當(dāng)沒有溢出布局時(shí)，圖片保持原來大小不變，但要溢出布局時(shí)，限制圖片的最大寬度為布局寬度，注意圖片的高度不要設(shè)置，不然高度固定的話，圖片的寬度變化會導(dǎo)致變形，高度不設(shè)置，讓它隨寬度自動做等比例變化即可。圖片的大小變化解決了，但還是有個(gè)問題，就是本來移動端要展示的是小圖片，但卻要下載大圖片造成流量的浪費(fèi)。解決的方法挺多的，比如img最新的srcset屬性（有兼容性問題，IE完全不支持）?；蛘呤怯胘s判斷獲取不同的圖片（麻煩）?？辞闆r運(yùn)用吧。

最后：覺得好的話記得點(diǎn)個(gè)贊哈。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的响应式布局讲解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。