響應(yīng)式布局，你需要知道的一切

時(shí)間：2023-09-03 02:48:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-03 02:48:02 來源：網(wǎng)站運(yùn)營

響應(yīng)式布局，你需要知道的一切：2011年，Google 發(fā)布了 Android 4.0，在經(jīng)歷了 Cupcake，Donut，F(xiàn)royo 等多個(gè)甜品名稱版本的迭代后，安卓終結(jié)了 Symbian（塞班）的霸主地位，迅速占領(lǐng)了手機(jī)市場(chǎng)躍居全球第一。同年，騰訊發(fā)布了微信開始進(jìn)軍移動(dòng)互聯(lián)網(wǎng)，阿里也在 2013 年宣布 ALL IN 無線，隨著智能設(shè)備的普及和移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來，響應(yīng)式布局這個(gè)詞開始頻繁地出現(xiàn)在 Web 設(shè)計(jì)和開發(fā)領(lǐng)域，作為一名優(yōu)秀的前端攻城獅，要將極致的用戶體驗(yàn)和最佳的工程實(shí)踐作為探索的目標(biāo) ): balabala...





所以，響應(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)頁設(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 頁面。

我們期望頁面可以根據(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)。我們常說的分辨率就是長和寬上像素點(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)頁為 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ù)制代碼所以，如果我們改變根元素的字體大小，頁面上所有使用 rem 的元素都會(huì)被重繪。

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

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

• EM 更適合模塊化的頁面元素，比如 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īng)式布局呢？

第一步需要先設(shè)置頁面的 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)端頁面的顯示問題，通過一個(gè)叫 <meta> 的 DOM 標(biāo)簽，允許我們可以定義視口的各種行為，比如寬度，高度，初始縮放比例等，

<!-- 下面的 meta 定義了 viewport 的寬度為屏幕寬度，單位是 CSS 像素，默認(rèn)不縮放 --><meta name="viewport" content="width=device-width, initial-scale=1">復(fù)制代碼Peter-Paul Koch 在文章中將移動(dòng)瀏覽器的視口分為三種。

layout viewport

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

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

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

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

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

visual viewport

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

因?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àn)。

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

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

idea viewport

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

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

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

meta

視口可以通過 <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，是否允許用戶縮放頁面，默認(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 像素的換算如下，

<!-- 假設(shè)我們?cè)O(shè)置視口為完美視口，這時(shí)視口寬度就等于設(shè)備寬度，CSS 像素為 375px --><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 庫，比如 Ant Desgin，Material UI，Element Plus 等，它們以柵格系統(tǒng)的方式實(shí)現(xiàn)了對(duì)網(wǎng)格部分特性的支持。

UI 庫對(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ù)用戶閱讀都是從左到右，如果一行文字太長，閱讀下一行時(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 是頁面上最重要的部分”。幾個(gè)月后，我意識(shí)到這是錯(cuò)誤的。圖片才是頁面上最重要的部分。

圖片幾乎占了網(wǎng)頁流量消耗的 60%，雅虎軍規(guī)和 Google 都將圖片優(yōu)化作為網(wǎng)頁優(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 支持一組媒體查詢條件

<!-- 響應(yīng)式圖片 --><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詳解