當(dāng)前內(nèi)容所在位置（可進(jìn)入專欄查看其他譯好的章節(jié)內(nèi)容）

• 第一章 層疊、優(yōu)先級(jí)與繼承（已完結(jié)）
  • 1.1 層疊
  • 1.2 繼承
  • 1.3 特殊值
  • 1.4 簡寫屬性
  • 1.5 CSS 漸進(jìn)式增強(qiáng)技術(shù)
  • 1.6 本章小結(jié)
• 第二章 相對(duì)單位（已完結(jié)）
  • 2.1 相對(duì)單位的威力
  • 2.2 em 與 rem
  • 2.3 告別像素思維
  • 2.4 視口的相對(duì)單位
  • 2.5 無單位的數(shù)值與行高
  • 2.6 自定義屬性
  • 2.7 本章小結(jié)
• 第三章 文檔流與盒模型（已完結(jié)）
  • 3.1 常規(guī)文檔流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 負(fù)的外邊距
  • 3.5 外邊距折疊
  • 3.6 容器內(nèi)的元素間距問題
  • 3.7 本章小結(jié)
• 第四章 Flexbox 布局（已完結(jié)）
  • 4.1 Flexbox 布局原理
  • 4.2 彈性子元素的大小
  • 4.3 彈性布局的方向
  • 4.4 對(duì)齊、間距等細(xì)節(jié)處
  • 4.5 本章小結(jié)
• 第五章 網(wǎng)格布局（已完結(jié)）
  • 5.1 構(gòu)建基礎(chǔ)網(wǎng)格
  • 5.2 網(wǎng)格結(jié)構(gòu)剖析 （上）
    • 5.2.1 網(wǎng)格線的編號(hào)（下）
    • 5.2.2 網(wǎng)格與 Flexbox 配合（下）
  • 5.3 兩種替代語法
    • 5.3.1 命名網(wǎng)格線
    • 5.3.2 命名網(wǎng)格區(qū)域
  • 5.4 顯式網(wǎng)格與隱式網(wǎng)格（上）
    • 5.4.1 添加變化 （中）
    • 5.4.2 讓網(wǎng)格元素填滿網(wǎng)格軌道（下）
  • 5.5 子網(wǎng)格（全新增補(bǔ)內(nèi)容）
  • 5.6 對(duì)齊相關(guān)的屬性
  • 5.7 本章小結(jié)
• 第六章 定位與堆疊上下文（已完結(jié)）
  • 6.1 固定定位
    • 6.1.1 創(chuàng)建一個(gè)固定定位的模態(tài)對(duì)話框
    • 6.1.2 在模態(tài)對(duì)話框打開時(shí)防止屏幕滾動(dòng)
    • 6.1.3 控制定位元素的大小
  • 6.2 絕對(duì)定位
    • 6.2.1 關(guān)閉按鈕的絕對(duì)定位
    • 6.2.2 偽元素的定位問題
  • 6.3 相對(duì)定位
    • 6.3.1 創(chuàng)建下拉菜單（上）
    • 6.3.2 創(chuàng)建 CSS 三角形（下）
  • 6.4 堆疊上下文與 z-index
    • 6.4.1 理解渲染過程與堆疊順序（上）
    • 6.4.2 用 z-index 控制堆疊順序（上）
    • 6.4.3 深入理解堆疊上下文（下）
  • 6.5 粘性定位
  • 6.6 本章小結(jié)
• 第七章 響應(yīng)式設(shè)計(jì)（概述）
  • 【7.1 移動(dòng)端優(yōu)先設(shè)計(jì)原則】（上篇） ???
  • 7.2 媒體查詢（精譯中 ?）

《CSS in Depth》新版封面

譯者按
鋪墊了好幾天，今天終于要開始學(xué)習(xí) CSS 響應(yīng)式設(shè)計(jì)的第一個(gè)大原則了——移動(dòng)端優(yōu)先（mobile first）。第七章有個(gè)特點(diǎn)——每一節(jié)篇幅都比較長，因?yàn)樯婕罢麄€(gè)頁面的謀篇布局和響應(yīng)式處理，不再僅僅聚焦于一個(gè)個(gè)具體的知識(shí)點(diǎn)上，學(xué)習(xí)時(shí)一定要在頭腦里構(gòu)建一個(gè)宏觀的視角。篇幅原因，本節(jié)擬分上下兩篇進(jìn)行介紹，本篇為上篇，對(duì)應(yīng) 7.1 節(jié)的概述部分。只要跟著作者的思路進(jìn)行本地實(shí)戰(zhàn)演練，其實(shí)也沒有想象中的那么抽象。一起加油吧！

7.1 移動(dòng)端優(yōu)先設(shè)計(jì)原則 Mobile first

響應(yīng)式設(shè)計(jì)的第一原則就是 移動(dòng)端優(yōu)先（mobile first），顧名思義，就是移動(dòng)端布局的構(gòu)建要先于桌面端布局。這是確保兩個(gè)版本都能生效的最佳方案。

開發(fā)移動(dòng)端頁面就像戴著腳鐐跳舞：除了屏幕大小受限、網(wǎng)速偏慢外，頁面交互所使用的控件（controls）也和 PC 端不太一樣：雖然可以打字，但總感覺不太順手，更沒法將鼠標(biāo)懸停在元素上觸發(fā)一些特定效果。倘若一開始就設(shè)計(jì)一個(gè)功能全面的網(wǎng)站，然后企圖根據(jù)移動(dòng)端的諸多限制削減某些功能，這么做往往都會(huì)以失敗告終。

而選用移動(dòng)端優(yōu)先的方式，則會(huì)讓您在網(wǎng)站設(shè)計(jì)之初就開始考慮這些制約因素。一旦解決了移動(dòng)端的用戶體驗(yàn)問題（至少做了相關(guān)規(guī)劃），后續(xù)就可以通過“漸進(jìn)式增強(qiáng)（progressive enhancement）”技術(shù)去改善大尺寸屏幕用戶的交互體驗(yàn)。

本章最終要實(shí)現(xiàn)的頁面效果如圖 7.1 所示。沒錯(cuò)，這就是一版移動(dòng)端的頁面設(shè)計(jì)。

【圖 7.1 待實(shí)現(xiàn)的移動(dòng)端頁面設(shè)計(jì)效果圖】

該頁面有三個(gè)主要部件：標(biāo)題欄（header）、帶了些文字內(nèi)容的頁面主圖（hero image）、以及主內(nèi)容區(qū)（main content）。要是輕觸或單擊頁面右上角那個(gè)圖標(biāo)，還能彈出一個(gè)隱藏菜單（如圖 7.2 所示）。這個(gè)由三條橫線組成的圖標(biāo)因?yàn)樾嗡茲h堡包中的面包和肉餅，通常也被稱作 漢堡（hamburger） 圖標(biāo)。

【圖 7.2 點(diǎn)擊或輕觸移動(dòng)端頁面的“漢堡”圖標(biāo)后打開的菜單效果】

移動(dòng)端布局一般是很樸素的設(shè)計(jì)。除了這個(gè)帶交互效果的菜單，移動(dòng)端更側(cè)重于內(nèi)容的展示。相對(duì)于大屏有大塊的空間來布局標(biāo)題欄、頁面主圖和菜單區(qū)，移動(dòng)端用戶往往瀏覽網(wǎng)頁的目的性更強(qiáng)。他們很可能與友人在戶外玩耍，只想快速查到商店?duì)I業(yè)時(shí)間或者像價(jià)格、地址這樣的具體信息。

因此移動(dòng)端的設(shè)計(jì)就是圍繞內(nèi)容展開的。試想有這么一個(gè) PC 端頁面，一邊設(shè)計(jì)為文章內(nèi)容，另一邊則是包含鏈接的側(cè)邊欄，里面還有些不太重要的內(nèi)容。要是換到移動(dòng)端來，肯定是希望先看到文章內(nèi)容。換句話說，我們希望最重要的內(nèi)容先出現(xiàn)在 HTML 里。這一點(diǎn)恰好與頁面可訪問性關(guān)注的焦點(diǎn)不謀而合：一款讀屏工具會(huì)優(yōu)先讀到“重要的內(nèi)容（good stuff）”；或者讓用戶通過鍵盤操作，率先獲取到這篇文章中的鏈接，其次才是側(cè)邊欄里的。

話雖如此，上述原則也并非放之四海而皆準(zhǔn)。比如上面談到的示例頁，盡管頁面主圖沒有下方的內(nèi)容重要，但它不失為整個(gè)頁面最搶眼的部分，因此考慮將其留在頁面頂部的位置也是合理的。另外，它還帶有少量文字內(nèi)容，瀏覽起來也不費(fèi)工夫。

重點(diǎn)

做響應(yīng)式設(shè)計(jì)時(shí)，一定要確保 HTML 里涵蓋了各種屏幕尺寸所需的全部內(nèi)容。每個(gè)屏幕尺寸固然可以有各自的 CSS 樣式，但它們必須共享同一份 HTML。

再來看看稍大一些的視口（viewport）該如何設(shè)計(jì)。屏幕較小的移動(dòng)端布局固然要先行，但在一頭扎進(jìn)移動(dòng)端樣式之前，大屏需要的整體設(shè)計(jì)也得做到心里有數(shù)，以便在代碼結(jié)構(gòu)方面合理決策。

移動(dòng)端樣式一旦就緒，就需要在頁面上分別設(shè)置一中一大兩個(gè) 斷點(diǎn)（breakpoint）。這可以借助 媒體查詢（media queries） 疊加額外的樣式來實(shí)現(xiàn)。額外引入的這些樣式僅對(duì)尺寸更大的屏幕生效。

斷點(diǎn)的定義

斷點(diǎn)（breakpoint） 是一個(gè)特殊的臨界點(diǎn)。它對(duì)應(yīng)于瀏覽器的某個(gè)寬度或高度。頁面樣式會(huì)在屏幕尺寸跨過該點(diǎn)時(shí)發(fā)生改變，旨在為當(dāng)前的屏幕尺寸提供最佳的布局效果。

本章后續(xù)還將對(duì)這些斷點(diǎn)的設(shè)置細(xì)節(jié)做深入考察，現(xiàn)階段只要知道頁面會(huì)添加這些斷點(diǎn)就行了；此外，還需要考慮在更大尺寸的屏幕下，頁面布局一般都會(huì)涉及哪些樣式調(diào)整。圖 7.3 顯示的是中等屏幕下的頁面布局效果：

【圖 7.3 中等屏幕視口下的頁面效果】

這時(shí)的視口尺寸相比移動(dòng)端稍微多了一些可供發(fā)揮的余地。標(biāo)題欄和頁面主圖可以設(shè)置更大的內(nèi)邊距；各菜單項(xiàng)由于剛好可以在一行鋪開，因此也無需隱藏了；漢堡圖標(biāo)因?yàn)椴挥每刂撇藛蔚拈_合，也隨即去掉了；而主內(nèi)容區(qū)則可以設(shè)計(jì)三個(gè)等寬列，并讓大部分元素填充在距離視口邊緣 1em 的范圍內(nèi)。

而尺寸更大的視口則與上面一樣，但也可以適當(dāng)增加頁面的外邊距，或者讓頁面主圖再大些，如圖 7.4 所示：

【圖 7.4 大尺寸屏幕視口下的頁面效果】

由于要先實(shí)現(xiàn)移動(dòng)端設(shè)計(jì)，所以才更有必要了解清楚頁面在大尺寸屏幕視口下的渲染效果，以便在一開始就確定出合理的 HTML 結(jié)構(gòu)。我們先創(chuàng)建一個(gè)新頁面和一個(gè)新樣式表，然后將代碼清單 7.1 中的 HTML 標(biāo)記添加到新頁面中。

這些代碼看起來很像非響應(yīng)式設(shè)計(jì)下的版本，但我針對(duì)移動(dòng)端設(shè)計(jì)融入了好幾處調(diào)整，稍后再詳述。

代碼清單 7.1 響應(yīng)式設(shè)計(jì)下的頁面 HTML 標(biāo)記

<!doctype html>
<html lang=”en-US”>
<head><meta charset="UTF-8"><title>Wombat Coffee Roasters</title><link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="header" class="page-header"><div class="title"><h1>Wombat Coffee Roasters</h1><div class="slogan">We love coffee</div></div>
</header><nav class="menu" id="main-menu"><button class="menu-toggle" id="toggle-menu"> <!-- 定義移動(dòng)端菜單的“漢堡”狀按鈕 -->toggle menu</button><div class="menu-dropdown"> <!-- 在移動(dòng)端設(shè)備上默認(rèn)隱藏的主菜單 --><ul class="nav-menu"><li><a href="/about.html">About</a></li><li><a href="/shop.html">Shop</a></li><li><a href="/menu.html">Menu</a></li><li><a href="/brew.html">Brew</a></li></ul></div>
</nav>
<aside id="hero" class="hero">Welcome to Wombat Coffee Roasters! We arepassionate about our craft, striving to bring youthe best hand-crafted coffee in the city.
</aside>
<main class="main"><section class="column"><!-- 用于中等尺寸和大尺寸視口的三列布局元素 --><h2 class="subtitle">Single-origin</h2><p>We have built partnerships with small farmsaround the world to hand-select beans at thepeak of season. We then carefully roast in<a href="/batch-size.html">small batches</a>to maximize their potential.</p></section><section class="column"><!-- 用于中等尺寸和大尺寸視口的三列布局元素 --><h2 class="subtitle">Blends</h2><p>Our tasters have put together a selection ofcarefully balanced blends. Our famous<a href="/house-blend.html">house blend</a>is available year round.</p></section><section class="column"><!-- 用于中等尺寸和大尺寸視口的三列布局元素 --><h2 class="subtitle">Brewing Equipment</h2><p>We offer our favorite kettles, Frenchpresses, and pour-over cones. Come to one ofour <a href="/classes.html">brewingclasses</a> to learn how to brew the perfectpour-over cup.</p></section>
</main>
</body>
</html>

上述代碼中，切換移動(dòng)端菜單的按鈕位于 nav 元素內(nèi)。nav-menu 元素放置的位置也恰好可以同時(shí)滿足移動(dòng)端和桌面端的設(shè)計(jì)需求。樣式類 main 和 column 則用于桌面端的布局設(shè)計(jì)（構(gòu)建新頁面時(shí)可能一開始還摸不清這些元素的作用，不過不要緊，后面會(huì)演示）。

接下來給頁面添加樣式。先處理比較簡單的元素樣式，如頁面字體、標(biāo)題、字體顏色等，如圖 7.5 所示。因?yàn)楫?dāng)前關(guān)注的是移動(dòng)端樣式，所以要將瀏覽器的寬度調(diào)小來模擬一個(gè)移動(dòng)設(shè)備的尺寸。這樣就能看到小屏幕上的頁面是什么樣的了。

【圖 7.5 加上簡單樣式后的移動(dòng)端頁面效果】

該頁面對(duì)應(yīng)的樣式如代碼清單 7.2 所示。將它們更新到本地樣式表，以建立邊框盒模型（border box sizing），并讓代碼設(shè)置的字體和鏈接顏色生效。該代碼用到了第 2 章（第 2.4.1 節(jié)）中介紹過的基于視口的響應(yīng)式字號(hào)，并且定義了頁面標(biāo)題即主內(nèi)容區(qū)的相關(guān)樣式。

代碼清單 7.2 給頁面設(shè)置初始樣式

*,
*::before,
*::after {box-sizing: border-box;
}:root {font-size: clamp(0.9rem, 0.5svw + 0.6em, 1.125rem); /* 基礎(chǔ)字號(hào)會(huì)根據(jù)視口大小適當(dāng)縮放（詳見第2章內(nèi)容） */
}body {margin: 0;font-family: Helvetica, Arial, sans-serif;
}a:link {color: #1476b8;font-weight: bold;text-decoration: none;
}
a:visited {color: #1430b8;
}
a:hover {text-decoration: underline;
}
a:active {color: #b81414;
}/* 頁面標(biāo)題欄樣式 */
.page-header {padding: 0.4em 1em;background-color: #fff;
}/* 主標(biāo)題樣式 */
.title > h1 {color: #333;text-transform: uppercase;font-size: 1.5rem;margin-block: 0.2em;
}/* 副標(biāo)題樣式 */
.slogan {color: #888;font-size: 0.875em;margin: 0;
}.hero {padding: 2em 1em;text-align: center;background-image: url(coffee-beans.jpg); /* 給頁面加上主圖 */background-size: 100%;color: #fff;text-shadow: 0.1em 0.1em 0.3em #000; /* 深色的文字陰影效果確保淺色文字在復(fù)雜背景中清晰可辨 */
}/* 主內(nèi)容區(qū)樣式 */
main {padding: 1em;
}.subtitle {margin-block: 1.5em;font-size: 0.875rem;text-transform: uppercase;
}

上面的樣式代碼大都比較簡單。它將頁面標(biāo)題和正文中的副標(biāo)題都轉(zhuǎn)換為全大寫（all caps），還給頁面各組件加上了內(nèi)外邊距，并調(diào)整了字號(hào)。

主圖樣式中的 text-shadow 屬性可能比較陌生。該屬性由若干個(gè)屬性值構(gòu)成。由這些值共同定義的文字陰影效果，最終將渲染到目標(biāo)文字的后面。這些值的前兩個(gè)，分別代表直角坐標(biāo)系中的坐標(biāo)位置，表征該陰影相對(duì)于文字位置的偏移量；而 0.1em 0.1em 則表明該陰影將相對(duì)于文字稍微往右下方偏移；第三個(gè)值（0.3em）為模糊半徑，代表該陰影區(qū)域的模糊程度。最后的 #000 則指明了陰影的顏色。

譯注
代碼清單 7.2 第 8 行用到了工具函數(shù) clamp：font-size: clamp(0.9rem, 0.5svw + 0.6em, 1.125rem);。原文只提示參閱第二章，沒有解釋具體含義，這里補(bǔ)充說明。它表示字號(hào)設(shè)為 0.5svw + 0.6em，且最小不低于 0.9rem、最大不超過 1.125rem。更多詳情可參考本專欄第 14 篇 《【CSS in Depth 2 精譯_014】2.4 視口的相對(duì)單位》 的第 2.4.2 小節(jié)相關(guān)內(nèi)容。

---

---

關(guān)于《CSS in Depth》（中譯本書名《深入解析 CSS》）

	第 1 版	第 2 版
讀者評(píng)分	原版：4.7（亞馬遜）；中文版：9.3（豆瓣）	原版：5.0（亞馬遜）；中文版：暫無，待出版
出版時(shí)間	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暫無，待出版
原價(jià)	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暫無，待出版
現(xiàn)價(jià)	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暫無，待出版
原版國內(nèi)預(yù)訂	起步價(jià) ￥461.00	起步價(jià) ￥750.00

本專欄為該書第 2 版高分譯文專欄，全網(wǎng)首發(fā)，精譯精校，持續(xù)更新，計(jì)劃今年內(nèi)完成全書翻譯，敬請(qǐng)期待！！！