響應式佈局講解

響應式佈局已經不是什麼新鮮事物了，但使用的場景卻在變少，由於如今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判斷獲取不一樣的圖片（麻煩）。看狀況運用吧。

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