所以，響應(yīng)式布局，要學(xué)。不僅要學(xué)，我們還要了解它的前世今生，前置知識(shí)，實(shí)現(xiàn)手段和原理，以便在實(shí)際應(yīng)用時(shí)選取合適的技術(shù)方案。

閱讀完本文，你將 Get 以下知識(shí)點(diǎn)，

• 什么是響應(yīng)式設(shè)計(jì)？
• 什么是像素，什么DPR？設(shè)備像素與CSS像素的區(qū)別是什么？
• EM，REM 的計(jì)算規(guī)則是什么？實(shí)際應(yīng)用中如何選擇？
• 什么是視口 viewport，布局視口，視覺視口，理想視口的區(qū)別？
• 百分比單位和視口單位的計(jì)算規(guī)則是什么？
• 彈性盒與網(wǎng)格
• 設(shè)備斷點(diǎn)與 CSS 媒體查詢
• 響應(yīng)式布局的一些最佳實(shí)踐

響應(yīng)式設(shè)計(jì)

著名的網(wǎng)頁(yè)設(shè)計(jì)師 Ehan Marcotte 在 2010 年 5 月的一篇名為《Responsive Web Design》的個(gè)人文章中，首次提到了響應(yīng)式網(wǎng)站設(shè)計(jì)。文中講到響應(yīng)式的概念源自響應(yīng)式建筑設(shè)計(jì)，即房間或者空間會(huì)根據(jù)其內(nèi)部人群數(shù)量和流動(dòng)而變化。

最近一門新興的學(xué)科“響應(yīng)式建筑(responsive architecture)”開始在探討物理空間根據(jù)流動(dòng)于其中的人進(jìn)行響應(yīng)的方法。建筑師們通過把嵌入式機(jī)器人與可拉伸材料結(jié)合的方法，嘗試藝術(shù)裝置和可彎曲、伸縮和擴(kuò)展的墻體結(jié)構(gòu)，達(dá)到根據(jù)接近人群的情況變化的效果。運(yùn)動(dòng)傳感器與氣候控制系統(tǒng)相結(jié)合，調(diào)整圍繞人們周圍的房間的溫度以及環(huán)境照明。已經(jīng)有公司制造了“智能玻璃技術(shù)”，當(dāng)室內(nèi)人數(shù)達(dá)到一定的閥值時(shí)，它可以自動(dòng)變?yōu)椴煌该鳡顟B(tài)，為人們提供更多隱私保護(hù)

Web 響應(yīng)式設(shè)計(jì)的理念與之非常相似，只不過在這里，

我們需要適配的不是建筑，而是 Web 頁(yè)面。

我們期望頁(yè)面可以根據(jù)用戶的設(shè)備環(huán)境，比如系統(tǒng)，分辨率，屏幕尺寸等因素，進(jìn)行自發(fā)式調(diào)整，提供更適合當(dāng)前環(huán)境的閱讀和操作體驗(yàn)，對(duì)已有和未來即將出現(xiàn)的新設(shè)備有一定的適應(yīng)能力。

這就是響應(yīng)式設(shè)計(jì)的理念。那么是否有對(duì)應(yīng)的方法論呢？

別急，在談及實(shí)現(xiàn)之前，我們需要了解一些前置知識(shí)，比如像素。

像素

什么是像素？

像素是圖像中最小的單位，一個(gè)不可再分割的點(diǎn)，對(duì)應(yīng)到物理設(shè)備上（比如計(jì)算機(jī)屏幕），就是屏幕上的一個(gè)光點(diǎn)。我們常說的分辨率就是長(zhǎng)和寬上像素點(diǎn)的個(gè)數(shù)，比如 IPhone X 的分辨率是 1125×2436，代表屏幕橫向和縱向分別有 1125 和 2436 個(gè)像素點(diǎn)，這里的像素是設(shè)備像素（Device Pixels）。

1px ≠1像素

實(shí)際開發(fā)中，你可能發(fā)現(xiàn) Iphone X 的設(shè)計(jì)稿是 375×812，WTF？

這里的 375×812 是 CSS 像素，也叫虛擬像素，邏輯像素。為什么我們不使用設(shè)備像素呢？

設(shè)備像素對(duì)應(yīng)屏幕上的光點(diǎn)，如今的屏幕分辨率已經(jīng)達(dá)到人眼無法區(qū)分單個(gè)像素的程度了。試想一下，要在 IPhone X 寬不到 7cm 的屏幕上數(shù)出 1125 個(gè)像素點(diǎn)，想想就讓人頭疼。所以我們?cè)趯?shí)際開發(fā)中通常使用 CSS 像素，你眼中的 1px 可能對(duì)應(yīng)多個(gè)設(shè)備像素，比如上面的 IPhone X，

1?css?px?=?3?*?3?device?px?//?IPhone?X?中，1?個(gè)?CSS?像素對(duì)應(yīng)?3*3?的?9?個(gè)設(shè)備像素點(diǎn)
復(fù)制代碼

而上面這個(gè)比值 3 就是設(shè)備像素比（Device Pixel Ratio，簡(jiǎn)稱 DPR）。

DPR 可以在瀏覽器中通過 JavaScript 代碼獲取，

window.devicePixelRatio?//?IPhone?X?中等于?3，IPhone?6/7/8?中等于?2，Web?網(wǎng)頁(yè)為?1
復(fù)制代碼

像素是一個(gè)固定單位，一般我們不會(huì)使用固定像素來做響應(yīng)式布局，但是你需要了解他。相反，響應(yīng)式布局里經(jīng)常會(huì)用到相對(duì)單位，比如 EM。

EM

EM 相對(duì)于元素自身的?font-size，

p?{
??font-size:?16px;
??padding:?1em;?/*?1em?=?16px?*/
}
復(fù)制代碼

如果元素沒有顯式地設(shè)置?font-size，那么?1em?等于多少呢？

這個(gè)問題其實(shí)跟咱說的?em?沒啥關(guān)系，這里跟?font-size?的計(jì)算規(guī)則相關(guān)，回顧一下。如果元素沒有設(shè)置?font-size，會(huì)繼承父元素的?font-size，如果父元素也沒有，會(huì)沿著 DOM 樹一直向上查找，直到根元素?html，根元素的默認(rèn)字體大小為 16px。

理解了?EM，REM?就很簡(jiǎn)單了。

REM

REM = Root EM，顧名思義就是相對(duì)于根元素的 EM。所以它的計(jì)算規(guī)則比較簡(jiǎn)單，

1?rem?就等于根元素?html?的字體大小，

html?{
??font-size:?14px;
}

p?{
??font-size:?1rem;?/*?1rem?=?14px?*/
}
復(fù)制代碼

所以，如果我們改變根元素的字體大小，頁(yè)面上所有使用?rem?的元素都會(huì)被重繪。

EM 和 REM 都是相對(duì)單位，我們?cè)谧鲰憫?yīng)式布局的時(shí)候應(yīng)該如何選擇呢？

根據(jù)兩者的特性，

• EM 更適合模塊化的頁(yè)面元素，比如 Web Components
• REM 則更加方便，只需要設(shè)置?html?的字體大小，所以 REM 的使用更加廣泛一些

實(shí)際開發(fā)中，設(shè)計(jì)圖的單位是 CSS 像素，我們可以借助一些工具將 px 自動(dòng)轉(zhuǎn)換為 rem，

下面是一個(gè)用?PostCSS?插件在基于 Webpack 構(gòu)建的項(xiàng)目中自動(dòng)轉(zhuǎn)換的例子，

var?px2rem?=?require('postcss-px2rem');

module.exports?=?{
??module:?{
????loaders:?[
??????{
????????test:?/\.css$/,
????????loader:?"style-loader!css-loader!postcss-loader"
??????}
????]
??},
??postcss:?function()?{
????return?[px2rem({remUnit:?75})];
??}
}
復(fù)制代碼

我們已經(jīng)有響應(yīng)式單位了，接下來要怎么讓頁(yè)面支持響應(yīng)式布局呢？

第一步需要先設(shè)置頁(yè)面的?viewport。

Viewport

著名的 JavaScript 專家 Peter-Paul Koch 曾發(fā)表過三篇有關(guān)?viewport?的文章，

• 《A tale of two viewports — part one》
• 《A tale of two viewports — part two》
• 《Meta viewport》

建議先看完上述文章。viewport?最先由 Apple 引入，用于解決移動(dòng)端頁(yè)面的顯示問題，通過一個(gè)叫??的 DOM 標(biāo)簽，允許我們可以定義視口的各種行為，比如寬度，高度，初始縮放比例等，

<meta?name="viewport"?content="width=device-width,?initial-scale=1">
復(fù)制代碼

Peter-Paul Koch 在文章中將移動(dòng)瀏覽器的視口分為三種。

layout viewport

為了解決早期 Web 頁(yè)面在手持設(shè)備上的顯示問題，Apple 在 IOS Safari 中定義了一個(gè)?viewport meta?標(biāo)簽，它可以創(chuàng)建一個(gè)虛擬的布局視口（layout viewport），這個(gè)視口的分辨率接近于 PC 顯示器。這樣一來，由于兩者的寬度趨近，CSS只需要像在PC上那樣渲染頁(yè)面就行，原有的頁(yè)面結(jié)構(gòu)也基本不會(huì)被破壞。

layout viewport?是一個(gè)固定的值，由瀏覽器廠商設(shè)定，

• IOS 和 Android 基本都是 980px
• 黑莓（BlackBerry）和 IE10 是 1024px

可以通過?document?獲取布局視口的寬度和高度，

var?layoutViewportWidth?=?document.documentElement.clientWidth
var?layoutViewportHeight?=?document.documentElement.clientHeight
復(fù)制代碼

visual viewport

視覺視口（visual viewport）可以簡(jiǎn)單理解為手持設(shè)備物理屏幕的可視區(qū)域。也就是你的手機(jī)屏幕，所以不同設(shè)備的視覺視口可能不同，有了?visual viewport，我們就可以實(shí)現(xiàn)網(wǎng)頁(yè)的拖拽和縮放了，為什么？

因?yàn)橛辛艘粋€(gè)承載布局視口的容器。

試想一下，假如我們現(xiàn)在有一臺(tái) IPhone 6（375×627），它會(huì)在寬為 375px 的?visual viewport?上，創(chuàng)建一個(gè)寬為 980px 的?layout viewport，于是用戶可以在?visual viewport中拖動(dòng)或縮放網(wǎng)頁(yè)來獲得更好的瀏覽體驗(yàn)。

視覺視口可以通過?window?獲取，

var?visualViewportWidth?=?window.innerWidth
var?visualViewportHeight?=?window.innerHeight
復(fù)制代碼

idea viewport

我們前面一直在討論 Web 頁(yè)面在移動(dòng)瀏覽器上的適配問題，但是如果網(wǎng)頁(yè)本來就是為移動(dòng)端設(shè)計(jì)的，這個(gè)時(shí)候布局視口（layout viewport）反而不太適用了，所以我們還需要另一種布局視口，它的寬度和視覺視口相同，用戶不需要縮放和拖動(dòng)網(wǎng)頁(yè)就能獲得良好的瀏覽體驗(yàn)，這就是理想視口（idea viewport）。

我們可以通過?meta?設(shè)置將布局視口轉(zhuǎn)換為理想視口，

"viewport"?content="width=device-width">
復(fù)制代碼

meta

視口可以通過??進(jìn)行設(shè)置，viewport?元標(biāo)簽的取值有 6 種，

• width，正整數(shù) | device-width，視口寬度，單位是 CSS 像素，如果等于 device-width，則為理想視口的寬度
• height，正整數(shù) | device-width，視口寬度，單位是 CSS 像素，如果等于 device-height，則為理想視口的高度
• initial-scale，0-10，初始縮放比例，允許小數(shù)點(diǎn)
• minimum-scale，0-10，最小縮放比例，必須小于等于 maximum-scale
• maximum-scale，0-10，最大縮放比例，必須大于等于 minimum-scale
• user-scalable，yes/no，是否允許用戶縮放頁(yè)面，默認(rèn)是 yes

了解了視口之后，讓我們回到響應(yīng)式布局，與視口相關(guān)的幾個(gè)單位有：vw，vh，百分比。

vw，vh，百分比

瀏覽器對(duì)于?vw?和?vh?的支持相對(duì)較晚，在 Android 4.4 以下的瀏覽器中可能沒辦法使用，下面是來自 Can I use 完整的兼容性統(tǒng)計(jì)數(shù)據(jù)，

新生特性往往逃不過兼容性的大坑，但是這并不妨礙我們了解它。

響應(yīng)式設(shè)計(jì)里，vw?和?vh?常被用于布局，因?yàn)樗鼈兪窍鄬?duì)于視口的，

• vw，viewport width，視口寬度，所以 1vw = 1% 視口寬度
• vh，viewport height，視口高度，所以 1vh = 1% 視口高度

以 IPhone X 為例，vw 和 CSS 像素的換算如下，

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

<style>
??p?{
????width:?10vw;?/*?10vw?=?1%?*?10?*?375px?=?37.5px?*/
??}
style>
復(fù)制代碼

我們說百分比也可以用來設(shè)置元素的寬高，它和?vw，vh?的區(qū)別是什么？

這里只需要記住一點(diǎn)，百分比是相對(duì)于父元素的寬度和高度計(jì)算的。

到這里，相信你已經(jīng)掌握了響應(yīng)式布局里常用的所有單位。接下來，我們介紹彈性盒和柵格，它們都不是單位，而是一種新的布局方案。

彈性盒

W3C 在 2009 年提出了彈性盒，截止目前瀏覽器對(duì)?FlexBox?的支持已經(jīng)相對(duì)完善，下面是 Can I use FlexBox 完整的兼容性情況，

關(guān)于彈性盒模型推薦閱讀這篇文章 A Complete Guide to Flexbox。

假設(shè)你已經(jīng)閱讀完并了解了彈性盒模型，響應(yīng)式布局中我們需要關(guān)注?FlexBox?里的兩個(gè)角色：容器和子元素。

container

指定?display?屬性為?flex，就可以將一個(gè)元素設(shè)置為?FlexBox?容器，我們可以通過定義它的屬性，決定子元素的排列方式，屬性可選值有 6 種，

• flex-direction，主軸方向，也就是子元素排列的方向
• flex-wrap，子元素能否換行展示及換行方式
• flex-flow，flex-direction 和 flex-wrap 的簡(jiǎn)寫形式
• justify-content，子元素在主軸上的對(duì)齊方式
• align-items，子元素在垂直于主軸的交叉軸上的排列方式
• align-content，子元素在多條軸線上的對(duì)齊方式

items

子元素也支持 6 個(gè)屬性可選值，

• order，子元素在主軸上的排列順序
• flex-grow，子元素的放大比例，默認(rèn) 0
• flex-shrink，子元素的縮小比例，默認(rèn) 1
• flex-basis，分配剩余空間時(shí)，子元素的默認(rèn)大小，默認(rèn) auto
• flex，flex-grow，flex-shrink，flex-basis 的簡(jiǎn)寫
• align-self，覆蓋容器的 align-items 屬性

彈性盒模型布局非常靈活，屬性值也足夠應(yīng)對(duì)大部分復(fù)雜的場(chǎng)景，但?FlexBox?基于軸線，只能解決一維場(chǎng)景下的布局，作為補(bǔ)充，W3C 在后續(xù)提出了網(wǎng)格布局（CSS Grid Layout），網(wǎng)格將容器再度劃分為 “行” 和 “列”，產(chǎn)生單元格，項(xiàng)目（子元素）可以在單元格內(nèi)組合定位，所以網(wǎng)格可以看作二維布局。

網(wǎng)格

關(guān)于網(wǎng)格布局推薦閱讀這篇文章 A Complete Guide to Grid。

上述文章非常詳細(xì)地介紹了網(wǎng)格的一些基本概念（比如容器和項(xiàng)目，行和列，單元格和網(wǎng)格線等），使用姿勢(shì)，注意事項(xiàng)等。作為新興的布局方案，使用時(shí)你需要考慮兼容性是否滿足，

不過在標(biāo)準(zhǔn)之外，我們可能也正通過其他的一些姿勢(shì)在使用網(wǎng)格。如果你關(guān)注時(shí)下一些比較熱門的 UI 庫(kù)，比如 Ant Desgin，Material UI，Element Plus 等，它們以柵格系統(tǒng)的方式實(shí)現(xiàn)了對(duì)網(wǎng)格部分特性的支持。

UI 庫(kù)對(duì)?Grid?的實(shí)現(xiàn)中，通常會(huì)使用到媒體查詢，這也是響應(yīng)式布局的核心技術(shù)。

媒體查詢

媒體查詢（Media Query）是 CSS3 規(guī)范中的一部分，媒體查詢提供了簡(jiǎn)單的判斷方法，允許開發(fā)者根據(jù)不同的設(shè)備特征應(yīng)用不同的樣式。響應(yīng)式布局中，常用的設(shè)備特征有，

• min-width，數(shù)值，視口寬度大于?min-width?時(shí)應(yīng)用樣式
• max-width，數(shù)值，視口寬度小于?max-width?時(shí)應(yīng)用樣式
• orientation，portrait?|?landscape，當(dāng)前設(shè)備的方向

選擇?min-width?和?max-width?取值的過程，稱為設(shè)備斷點(diǎn)選擇，它可能取決于產(chǎn)品設(shè)計(jì)本身，下面是 百度 Web 生態(tài)團(tuán)隊(duì) 總結(jié)的一套比較具有代表性的設(shè)備斷點(diǎn)，

/*?很小的設(shè)備（手機(jī)等，小于?600px）?*/
@media?only?screen?and?(max-width:?600px)?{?}

/*?比較小的設(shè)備（豎屏的平板，屏幕較大的手機(jī)等,?大于?600px）?*/
@media?only?screen?and?(min-width:?600px)?{?}

/*?中型大小設(shè)備（橫屏的平板,?大于?768px）?*/
@media?only?screen?and?(min-width:?768px)?{?}

/*?大型設(shè)備（電腦,?大于?992px）?*/
@media?only?screen?and?(min-width:?992px)?{?}

/*?超大型設(shè)備（大尺寸電腦屏幕,?大于?1200px）?*/
@media?only?screen?and?(min-width:?1200px)?{?}
復(fù)制代碼

如果你需要對(duì)細(xì)分屏幕大小進(jìn)行適配，ResponsiveDesign 站點(diǎn)上的這篇文章 Media queries for common device breakpoints 可能會(huì)有所幫助。

響應(yīng)式文字和圖片

相信你已經(jīng)掌握了響應(yīng)式布局的所有知識(shí)，接下來我們介紹一些最佳實(shí)踐。

文字

大多數(shù)用戶閱讀都是從左到右，如果一行文字太長(zhǎng)，閱讀下一行時(shí)容易出錯(cuò)，或者用戶只會(huì)讀一行文字的前半部分，而略讀后半部分。在上世紀(jì)就有研究表明，一行 45 ~ 90 個(gè)英文字符是最好的，對(duì)于漢字來說，一行文字合理的數(shù)量應(yīng)該是 22 ~ 45 個(gè)字符。

此外，字體大小對(duì)閱讀體驗(yàn)同樣重要，基本字體一般不小于?16px，行高大于?1.2em。

p?{
??font-size:?16px;
??line-height:?1.2em;?/*?1.2em?=?19.2px?*/
}
復(fù)制代碼

圖片

《高性能網(wǎng)站建設(shè)指南》的作者 Steve Souders 曾在 2013 年的一篇 博客 中提到：

我的大部分性能優(yōu)化工作都集中在 JavaScript 和 CSS 上，從早期的 Move Scripts to the Bottom 和 Put Stylesheets at the Top 規(guī)則。為了強(qiáng)調(diào)這些規(guī)則的重要性，我甚至說過，“JS 和 CSS 是頁(yè)面上最重要的部分”。幾個(gè)月后，我意識(shí)到這是錯(cuò)誤的。圖片才是頁(yè)面上最重要的部分。

圖片幾乎占了網(wǎng)頁(yè)流量消耗的 60%，雅虎軍規(guī)和 Google 都將圖片優(yōu)化作為網(wǎng)頁(yè)優(yōu)化不可或缺的環(huán)節(jié)，除了圖片性能優(yōu)化外，響應(yīng)式圖片無疑帶來更好的用戶體驗(yàn)。

下面是一些響應(yīng)式圖片的最佳實(shí)踐，

1.確保圖片內(nèi)容不會(huì)超出 viewport

試想一下，如果圖片固定大小且超出理想視口的寬度，會(huì)發(fā)生什么？

內(nèi)容會(huì)溢出視口外，導(dǎo)致出現(xiàn)橫向滾動(dòng)條對(duì)不對(duì)，這在移動(dòng)端是非常不好的瀏覽體驗(yàn)，因?yàn)橛脩敉?xí)慣上下滾動(dòng)，而不是左右滾動(dòng)，所以我們需要確保圖片內(nèi)容不要超出?viewport，可以通過設(shè)置元素的最大寬度進(jìn)行限制，

img?{
??max-width:?100%;
}
復(fù)制代碼

類似的，相同的規(guī)則也應(yīng)該用于一些其他的嵌入式元素，比如 embed，object，video 等。

2. 圖片質(zhì)量支持響應(yīng)式

這是一種支持優(yōu)雅降級(jí)的方案，現(xiàn)代瀏覽器已經(jīng)支持了?srcset?和?sizes?屬性，對(duì)于兼容性不好的瀏覽器，會(huì)繼續(xù)使用默認(rèn)?src?屬性中的圖片，所以我們可以放心大膽的使用。

• srcset 支持定義幾組圖片和對(duì)應(yīng)的尺寸
• sizes 支持一組媒體查詢條件

<img
??srcset="example-320w.jpg?320w,
??????????example-480w.jpg?480w,
??????????example-800w.jpg?800w"
??sizes="(max-width:?320px)?280px,
?????????(max-width:?480px)?440px,
?????????800px"
??src="example-800w.jpg"?alt="An?example?image">
復(fù)制代碼

如果我們書寫了上面代碼中的圖片，瀏覽器會(huì)根據(jù)下面的順序加載圖片，

1. 獲取設(shè)備視口寬度
2. 從上到下找到第一個(gè)為真的媒體查詢
3. 獲取該條件對(duì)應(yīng)的圖片尺寸
4. 加載?srcset?中最接近這個(gè)尺寸的圖片并顯示

除了上述方式外，我們也可以使用?HTML5?標(biāo)準(zhǔn)中的?picture?標(biāo)簽實(shí)現(xiàn)類似的效果，

<picture>
??<source?media="(max-width:?799px)"?srcset="example-480w-portrait.jpg">
??<source?media="(min-width:?800px)"?srcset="example-800w.jpg">
??<img?src="example-800w.jpg"?alt="An?example?img">
picture>
復(fù)制代碼

小結(jié)

我們從響應(yīng)式布局的設(shè)計(jì)角度出發(fā)，介紹了響應(yīng)式的設(shè)計(jì)理念，前置知識(shí)（像素，DPR，視口等），相對(duì)單位（em，rem，百分比，vw，vh等），布局方案（FlexBox，Gird）以及媒體查詢等技術(shù)，其中不乏很多前輩們的最佳實(shí)踐，作為開發(fā)者我們應(yīng)該用這些經(jīng)驗(yàn)，以更好地優(yōu)化不同尺寸大小設(shè)備的用戶體驗(yàn)。

參考鏈接

• Ethan Marcotte, Responsive Web Design
• A tale of two viewports — part one
• A tale of two viewports — part two
• Meta viewport
• PWA應(yīng)用實(shí)戰(zhàn)，2.5 響應(yīng)式布局
• 移動(dòng)前端第一彈：viewport詳解

寫在最后

本文首發(fā)于我的 博客，才疏學(xué)淺，難免有錯(cuò)誤，文章有誤之處還望不吝指正！

如果有疑問或者發(fā)現(xiàn)錯(cuò)誤，可以在相應(yīng)的 issues 進(jìn)行提問或勘誤

如果喜歡或者有所啟發(fā)，歡迎 star，對(duì)作者也是一種鼓勵(lì)

來源：campcc

https://juejin.cn/post/6951575591099301895