響應式佈局講解

newbeehh發表於2018-06-24

響應式佈局已經不是什麼新鮮事物了，但使用的場景卻在變少，因為現在web程式變得愈發豐富和複雜，而產品對移動端的重視也超過了pc端，如果僅用響應式佈局實現適配，程式碼的複雜度和相容性都難以維護，並且很容易造成程式碼冗餘（比如媒體查詢的多餘程式碼）。開發成本和另開發一款程式接近，因此，獨立開發出一款針對移動端的web程式已近變成了很多公司最佳方案。

那麼響應式佈局就無用武之地了？也不是，當我們只是開一款功能單一的展示性程式時，如靜態頁面，那麼響應式佈局可能是最優選。所以響應式佈局開始從最流行的方案變成一種折中方案。

接下來就講講如何設計一個簡單的響應式佈局。

響應式佈局的幾個主要因素：

  • viewport：

響應式佈局本來是要適配移動端和pc端的，但viewport的存在讓針對移動端的設定都失去了效果，所以第一步就是讓viewport失去效果：

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

至於viewport具體解釋，大家可以看下這個：此畫素非彼畫素。

  • 媒體查詢（@media）設定斷點：

響應式佈局最主要的手段便是媒體查詢，通過媒體查詢設定斷點，可以為各種螢幕寬度的裝置提供對應樣式。斷點的設定一般可以設定為三種型別，如手機（<=480px），平板（480-720px），桌面電腦（>=1024px），這當然是大概的設定，如果想更加具體點，可以拖動瀏覽器螢幕，以適應不同的寬度，選擇開始變形的那個尺度作為斷點即可。媒體查詢的使用：

在樣式表中使用：

@media (min-width: 481px) and (max-width:768px) {
    /*具體操作*/
}複製程式碼

在連線時呼叫：

<link href="styles.css" rel="stylesheet" media="(max-width:480px)">複製程式碼

使用@import匯入：

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

具體的使用同學們可以看看MDN的教程。

  • 使用流式，浮動柵格佈局：

響應式佈局最常見的就是在pc端使用多欄佈局（柵格），因為柵格佈局很方便在不同螢幕裝置中進行增刪或者移動從而實現各種大小螢幕的適配（如小螢幕就一欄，而大螢幕就有三欄），每欄的寬度用流式佈局（有時也叫彈性佈局，就是width使用百分比）進行適應，因為不同螢幕的寬度各異。然後使用浮動進行橫排。最外層包裹元素一般加個max-width，防止pc大屏太寬，導致頁面內容跨度過大，造成閱讀困難。大概的程式碼：

<main>
    <aside></aside>
    <article></article>
    <aside></aside>
</main>
<style>
    main{
        max-width:1200px;
    }
    aside{
        float:left;
        width: 20%;
    }
    article{
        float:left;
        width: 60%;
    }
</style>複製程式碼

響應式佈局講解

然後根據斷點判斷螢幕大小，對每一欄清除浮動，刪減或者移至下方。由於我們是桌面裝置優先的，所以媒體查詢的是移動端大小，（當然也可以移動端優先，反過來就是了）大概程式碼：

@media (max-width:481px) {
    aside {
        float: none;
        width: auto;
    }
    article{
        float: none;
        width: auto;
    }
}複製程式碼

響應式佈局講解

是不是很簡單，這就是所謂的響應式佈局了，當然程式碼我是極其簡化的，應該還有很多細節上的修飾。除了流式，浮動柵格佈局，還有flex佈局，table佈局等等都是可以實現響應式設計的。具體看情況使用。接下來講講一些注意事項：

響應式佈局的一些問題：

  • 重置盒子模型：

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

  • HTML程式碼的順序：

要注意HTML程式碼的順序，因為很多時候我們的主內容區是放到中間的，如：

<aside></aside>
<article></article>
<aside></aside>複製程式碼

而在移動端時它應該放到最上面，可由於程式碼的順序關係，清除浮動後，它是按順序放到中間去了，（具體看上圖）。為了增強使用者體驗，讓移動端的使用者第一眼就能看到主要內容，而不用下拉，所以HTML編碼時，應該讓主內容區放到最上層，要浮動時，加個外層，讓主內容區和相鄰側邊分別浮動到兩邊即可。大概程式碼：

<div>
    <article></article>
    <aside></aside>
</div>
<aside></aside>複製程式碼
div{
    float:left;
    width: 80%;
}
div article{
    float:right;
    width: 75%;
}
div aside{
    float:left;
    width: 25%
}
aside{
    float:left;
    width: 20%
}複製程式碼

  • 圖片和視訊的大小：

圖片也要用百分比，不然會溢位佈局之外，一般用max-width：100%，當沒有溢位佈局時，圖片保持原來大小不變，但要溢位佈局時，限制圖片的最大寬度為佈局寬度，注意圖片的高度不要設定，不然高度固定的話，圖片的寬度變化會導致變形，高度不設定，讓它隨寬度自動做等比例變化即可。圖片的大小變化解決了，但還是有個問題，就是本來移動端要展示的是小圖片，但卻要下載大圖片造成流量的浪費。解決的方法挺多的，比如img最新的srcset屬性（有相容性問題，IE完全不支援）。或者是用js判斷獲取不同的圖片（麻煩）。看情況運用吧。

最後：覺得好的話記得點個贊哈。


相關文章