文章主要介紹了你必須要知道關(guān)于響應式布局的幾件事，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。

一、前言

響應式Web設計可以讓一個網(wǎng)站同時適配多種設備和多個屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設備/瀏覽器能力）而變化。本文主要介紹一些響應式布局容易忽略但又很重要的知識點。想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客

二、視口

移動前端中常說的 viewport （視口）就是瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域。視口通常并不等于屏幕大小，特別是可以縮放瀏覽器窗口的情況下。手機端與PC端視口存在差異，電腦端的視口寬度等于分辨率，而移動端的視口寬度跟分辨率沒有關(guān)系,寬度默認值是設備廠家指定的。iOS, Android基本都將這個視口分辨率設置為 980px。

1.為什么手機端視口要設為980px?

當年喬布斯設想：蘋果手機如果在市場上火爆了，但是各個網(wǎng)站還沒有來得及制作手機端網(wǎng)頁，那么用戶不得不用手機訪問電腦版的網(wǎng)頁，如何用小屏幕訪問大屏幕的頁面也同樣可讀呢？喬幫主就想著為手機固定一個視口寬度，讓手機的視口寬度等于世界上絕大多數(shù)PC網(wǎng)頁的版心寬度，就是980px。這樣，用手機訪問電腦版網(wǎng)頁的時候，旁邊剛好沒有留白。不過頁面縮放后文字會變得非常小，用戶需要手動放大縮小才能看清楚，體驗非常差。

2.約束視口

為了解決前面的問題，可以在網(wǎng)頁的中添加下面這行代碼：

<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    最大的倍數(shù)是1.0倍
user-scalable=0      不允許縮放視口

這個視口的標簽告訴瀏覽器怎么渲染網(wǎng)頁。在這里，標簽想表達的意思是：按照設備的寬度（device-width）來渲染網(wǎng)頁內(nèi)容。事實上，在支持這個標簽的設備上給你看一看效果，你就明白了。

不錯呀！用戶體驗大大改善！！！
此時如果用document.documentElement.clientWidth來測試瀏覽器屏幕寬度，你會發(fā)現(xiàn)當前視口寬度等于手機屏幕的寬度，約數(shù)后的視口寬度都是在320~480之間（手機豎直使用的時候）。
這個視口的尺寸，是手機廠商設置的，能夠保證我們的文字比如16px，在自己的這個視口下清晰、大小剛剛合適。所以大屏幕的手機的約束視口 > 小屏幕手機的約束視口。這就能夠保證我們的網(wǎng)頁可以用px寫字號、寫行高。
需要注意的是：約束之后的視口寬度，不是自己的分辨率！！每個手機的分辨率，都要比自己的視口寬度大得多得多！
最最重要的一句話：前端開發(fā)工程師，絲毫不關(guān)心手機的分辨率，我們只關(guān)心視口。