前端開發(fā)-響應(yīng)式原理

前言

2011年莹菱，Google 發(fā)布了 Android 4.0，在經(jīng)歷了 Cupcake吱瘩，Donut道伟，F(xiàn)royo 等多個(gè)甜品名稱版本的迭代后，安卓終結(jié)了 Symbian（塞班）的霸主地位使碾，迅速占領(lǐng)了手機(jī)市場躍居全球第一蜜徽。同年，騰訊發(fā)布了微信開始進(jìn)軍移動互聯(lián)網(wǎng)票摇，阿里也在 2013 年宣布 ALL IN 無線拘鞋，隨著智能設(shè)備的普及和移動互聯(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í)現(xiàn)手段和原理，以便在實(shí)際應(yīng)用時(shí)選取合適的技術(shù)方案教届。

閱讀完本文响鹃，你將 Get 以下知識點(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ì)惨好，即房間或者空間會根據(jù)其內(nèi)部人群數(shù)量和流動而變化。

最近一門新興的學(xué)科“響應(yīng)式建筑(responsive architecture)”開始在探討物理空間根據(jù)流動于其中的人進(jìn)行響應(yīng)的方法随闺。建筑師們通過把嵌入式機(jī)器人與可拉伸材料結(jié)合的方法日川，嘗試藝術(shù)裝置和可彎曲、伸縮和擴(kuò)展的墻體結(jié)構(gòu)矩乐，達(dá)到根據(jù)接近人群的情況變化的效果龄句。運(yùn)動傳感器與氣候控制系統(tǒng)相結(jié)合，調(diào)整圍繞人們周圍的房間的溫度以及環(huán)境照明散罕。已經(jīng)有公司制造了“智能玻璃技術(shù)”撒璧，當(dāng)室內(nèi)人數(shù)達(dá)到一定的閥值時(shí)，它可以自動變?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)裕寨，對已有和未來即將出現(xiàn)的新設(shè)備有一定的適應(yīng)能力。

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

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

像素

什么是像素绅络？

像素是圖像中最小的單位月培，一個(gè)不可再分割的點(diǎn)，對應(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è)備像素對應(yīng)屏幕上的光點(diǎn)举娩，如今的屏幕分辨率已經(jīng)達(dá)到人眼無法區(qū)分單個(gè)像素的程度了。試想一下构罗，要在 IPhone X 寬不到 7cm 的屏幕上數(shù)出 1125 個(gè)像素點(diǎn)铜涉，想想就讓人頭疼。所以我們在實(shí)際開發(fā)中通常使用 CSS 像素遂唧，你眼中的 1px 可能對應(yīng)多個(gè)設(shè)備像素芙代，比如上面的 IPhone X，

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

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

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

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

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

EM

EM 相對于元素自身的 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蛾扇，會繼承父元素的 font-size攘烛，如果父元素也沒有，會沿著 DOM 樹一直向上查找镀首，直到根元素 html坟漱，根元素的默認(rèn)字體大小為 16px。

理解了 EM更哄，REM 就很簡單了芋齿。

REM

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

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

html {
  font-size: 14px;
}

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

所以，如果我們改變根元素的字體大小栅炒，頁面上所有使用 rem 的元素都會被重繪掂摔。

EM 和 REM 都是相對單位，我們在做響應(yīng)式布局的時(shí)候應(yīng)該如何選擇呢赢赊？

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

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

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

下面是一個(gè)用 PostCSS 插件在基于 Webpack 構(gòu)建的項(xià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 引入，用于解決移動端頁面的顯示問題往扔，通過一個(gè)叫 `` 的 DOM 標(biāo)簽贩猎，允許我們可以定義視口的各種行為，比如寬度萍膛，高度吭服，初始縮放比例等，

<!-- 下面的 meta 定義了 viewport 的寬度為屏幕寬度蝗罗，單位是 CSS 像素艇棕，默認(rèn)不縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
復(fù)制代碼

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

layout viewport

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

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）可以簡單理解為手持設(shè)備物理屏幕的可視區(qū)域虫碉。也就是你的手機(jī)屏幕，所以不同設(shè)備的視覺視口可能不同进泼，有了 visual viewport蔗衡，我們就可以實(shí)現(xiàn)網(wǎng)頁的拖拽和縮放了纤虽，為什么乳绕？

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

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

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

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

idea viewport

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

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

<meta name="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，是否允許用戶縮放頁面弥雹，默認(rèn)是 yes

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

vw厕吉，vh酱固，百分比

瀏覽器對于 vw 和 vh 的支持相對較晚，在 Android 4.4 以下的瀏覽器中可能沒辦法使用

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

響應(yīng)式設(shè)計(jì)里，vw 和 vh 常被用于布局项钮，因?yàn)樗鼈兪窍鄬τ谝暱诘模?/p>

• vw班眯，viewport width，視口寬度寄纵，所以 1vw = 1% 視口寬度
• vh鳖敷，viewport height，視口高度程拭，所以 1vh = 1% 視口高度

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

<!-- 假設(shè)我們設(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)，百分比是相對于父元素的寬度和高度計(jì)算的水由。

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

彈性盒

W3C 在 2009 年提出了彈性盒媚创，截止目前瀏覽器對 FlexBox 的支持已經(jīng)相對完善

關(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 的簡寫形式
• justify-content，子元素在主軸上的對齊方式
• align-items世囊，子元素在垂直于主軸的交叉軸上的排列方式
• align-content别瞭，子元素在多條軸線上的對齊方式

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 的簡寫
• align-self，覆蓋容器的 align-items 屬性

彈性盒模型布局非常靈活陕习，屬性值也足夠應(yīng)對大部分復(fù)雜的場景霎褐，但 FlexBox 基于軸線，只能解決一維場景下的布局该镣，作為補(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)格線等）枣购，使用姿勢嬉探，注意事項(xiàng)等。作為新興的布局方案棉圈，使用時(shí)你需要考慮兼容性是否滿足涩堤，

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

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

媒體查詢

媒體查詢（Media Query）是 CSS3 規(guī)范中的一部分肴掷，媒體查詢提供了簡單的判斷方法敬锐，允許開發(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ù)制代碼

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

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

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

文字

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

此外，字體大小對閱讀體驗(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è)月后，我意識到這是錯(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)容不會超出 viewport

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

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

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

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

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

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

• srcset 支持定義幾組圖片和對應(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ù)制代碼

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

1. 獲取設(shè)備視口寬度
2. 從上到下找到第一個(gè)為真的媒體查詢
3. 獲取該條件對應(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ì)理念，前置知識（像素惊窖，DPR刽宪，視口等），相對單位（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)式布局
• 移動前端第一彈：viewport詳解