文章主要介紹了你必須要知道關於響應式佈局的幾件事，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。
一、前言
響應式Web設計可以讓一個網站同時適配多種裝置和多個螢幕，可以讓網站的佈局和功能隨使用者的使用環境（螢幕大小、輸入方式、裝置/瀏覽器能力）而變化。本文主要介紹一些響應式佈局容易忽略但又很重要的知識點。想閱讀更多優質文章請猛戳GitHub部落格
二、視口
移動前端中常說的 viewport （視口）就是瀏覽器中用於呈現網頁的區域。視口通常並不等於螢幕大小，特別是可以縮放瀏覽器視窗的情況下。手機端與PC端視口存在差異，電腦端的視口寬度等於解析度，而移動端的視口寬度跟解析度沒有關係,寬度預設值是裝置廠家指定的。iOS, Android基本都將這個視口解析度設定為 980px。
1.為什麼手機端視口要設為980px?
當年賈伯斯設想：蘋果手機如果在市場上火爆了，但是各個網站還沒有來得及製作手機端網頁，那麼使用者不得不用手機訪問電腦版的網頁，如何用小螢幕訪問大螢幕的頁面也同樣可讀呢？喬幫主就想著為手機固定一個視口寬度，讓手機的視口寬度等於世界上絕大多數PC網頁的版心寬度，就是980px。這樣，用手機訪問電腦版網頁的時候，旁邊剛好沒有留白。不過頁面縮放後文字會變得非常小，使用者需要手動放大縮小才能看清楚，體驗非常差。
2.約束視口
為了解決前面的問題，可以在網頁的中新增下面這行程式碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
width=device-width 視口為裝置寬度（就是人設定的一個寬度）//不設定的話預設為980px
initial-scale=1.0 初始化的視口大小是1.0倍
maximum-scale=1.0 最大的倍數是1.0倍
user-scalable=0 不允許縮放視口
這個視口的標籤告訴瀏覽器怎麼渲染網頁。在這裡，標籤想表達的意思是：按照裝置的寬度（device-width）來渲染網頁內容。事實上，在支援這個標籤的裝置上給你看一看效果，你就明白了。
不錯呀！使用者體驗大大改善！！！
此時如果用document.documentElement.clientWidth來測試瀏覽器螢幕寬度，你會發現當前視口寬度等於手機螢幕的寬度，約數後的視口寬度都是在320~480之間（手機豎直使用的時候）。
這個視口的尺寸，是手機廠商設定的，能夠保證我們的文字比如16px，在自己的這個視口下清晰、大小剛剛合適。所以大螢幕的手機的約束視口 > 小螢幕手機的約束視口。這就能夠保證我們的網頁可以用px寫字號、寫行高。
需要注意的是：約束之後的視口寬度，不是自己的解析度！！每個手機的解析度，都要比自己的視口寬度大得多得多！
最最重要的一句話：前端開發工程師，絲毫不關心手機的解析度，我們只關心視口。