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

一、前言

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

二、視口

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

1.為什么手機(jī)端視口要設(shè)為980px?

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

2.約束視口

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

width=device-width   視口為設(shè)備寬度（就是人設(shè)置的一個(gè)寬度）//不設(shè)置的話默認(rèn)為980px
initial-scale=1.0    初始化的視口大小是1.0倍
maximum-scale=1.0    最大的倍數(shù)是1.0倍
user-scalable=0      不允許縮放視口

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

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