什么是響應式布局

響應式網頁（Responsive Web，RW）又稱自適應網頁，是一種網頁設計布局，可以根據訪問媒體不同（網頁寬高變化）而變化樣式，防止網頁布局因訪問環境而造成布局混亂，影響用戶體驗。

為什么會造成布局混亂

移動設備（手機等）的分辨率相較于電腦通常會更小，手機瀏覽器會根據設定調整自己的網頁可視區域，通常為980px（根據設備設置而定）。并且，在移動設備上px可能與電腦上的度量不同，這是由于技術的發展，手機的屏幕像素密度越來越高，造成一個像素點可能對應兩個物理像素。

想要實現響應式網頁，需要對整個網頁布局進行分析，在此基礎上，再考慮以下方法。

META標簽

<meta content="width=device-width, initial-scale=1.0" name="viewport">

這句話可以說寫網頁必備，首先我們來理解一下這句話的作用。

meta是一個輔助性標簽，可以提供網頁元信息，方便SEO，對于響應式布局也有幫助。

viewport是設備能夠顯示網頁的那塊區域，根據設備的不同，其viewport可能也不相同。viewport有三種，分別是layout、visual和ideal，這三種具體講解請自行搜索。移動設備默認是layout viewport，但在開發過程中，我們需要ideal viewport。width=device-width正是將寬設置成ideal viewport的狀態，initial-scale是設置頁面初始縮放值，viewport總共有六個屬性：

相對度量

CSS3推出了許多相對度量單位，相對度量單位是指參考某一元素變化度量，也就是說其并不是一直不變的。

1. %: 字面意思百分號，根據父元素而變化。如 width：100% 寬度即父元素大小
2. vw: 視圖寬度，根據視圖而變化。如width：100vw 寬度即網頁視圖寬度
3. vh: 視圖高度，根據視圖而變化。如height： 100vh 高度即網頁視圖高度
4. em: 根據當前對象文本大小而變化（僅用于字體）
5. rem: 根據根元素文本大小而變化（僅用于字體）

對于一些需要跟隨頁面變化的元素，應該使用相對度量單位。比如input框

input[type=text] {
	width: calc(100% - 50px) // 跟隨父元素寬度且少50px
}
// 關于calc函數可以看 https://blog.csdn.net/qq_30258721/article/details/126273893

FLEX布局

flex布局也是制作響應式網頁重要的一環。flex布局可以用來為盒狀模型提供最大的靈活性，最大程度上利用網頁空間。

但網頁寬高變化時，flex布局可以將盒子重新排列，實現網頁布局整齊。

寬高設置

對于一些寬高無法固定的盒模型，寬高不能設置成定值(height：100px)， 而應該通過百分比，vh或者其他相對度量值。
百分比和vh用的比較多，對于頁面的主體的部分通常寫：

width: 100%
// height有很多寫法，auto、100%和100vh等等，每種對應不同情況，比如100vh表明盒子高為一頁面高

注意：不應該所有盒子都設置對象度量。大盒子設置width：100%時，應該思考其內部小盒子需不需要也設置相對度量，如果都設置成width：100%，那么頁面變化時，幾個盒子都跟著變化，造成樣式混亂。一般應該大盒子設置相對，內部小盒子設置定值，這樣當大盒子隨著頁面變化后，如果寬度不夠容下所有小盒子，會將其擠到下一行。

媒體查詢

@media是CSS3推出的一個新特性，它能識別各種設備，通常類型值設為screen。通過@media可以定義不同寬高下的樣式，比如當頁面寬度小于800px之間時主體部分背景色變為紅色

@media screen and (max-width: 800px) {
    main {
        background-color: red;
    }
}

替換元素

對于一些無法直接通過改變樣式的元素，可進行替換，如導航欄，頁面縮小時，導航欄項不可以減少，字體大小改變也會導致無法看清等問題，這些將其替換成icon圖標，點擊即出現導航欄。

響應式框架

當然，現在前端框架已經發展的十分成熟，非必要不需要從零開始布局。推薦幾個響應式前端框架：

1. Bootstrap
   自 Bootstrap 3起，Bootstrap就支持響應式布局，且移動設備優先。bootstrap開源且上手簡單，十分推薦

2. Foundation
   Foundation也是相當成熟的前端框架，不僅支持響應式布局，也提供多種web UI組件

3. Ulkit
   Ulkit是一個輕量級、模塊化的前端框架，幫助開發出快速、強大的Web接口，它有著全面的HTML、CSS和JS集合，易于使用和擴展。

4. Groundwork

5. Base