[譯] 響應式設計的基本原則

• 原文地址：Responsive design ground rules
• 原文做者：Polypane
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Pingren
• 校對者：Moonliujk，Chorer

響應式設計的基本原則

建立響應式設計使人膽戰心驚：它由許多移動的部分構成，並且常常不像你指望中同樣排列；你在設計的時候還要惦記着全部不一樣的視口（viewports）。經過遵照這些基本原則，你能夠建立出更加健壯和可預測的響應式設計。

原則 #1：保持簡單的視口

當初剛實施視口元標記（viewport meta tag）的標準時，基本常識是你必須添加各類值，從而阻止用戶縮放，以及設置最大和最小的屏幕尺寸。結果代表，這實際上是對用戶不友好的作法。

事實上你只須要作兩件事：把寬度設置爲展現你的網站的設備寬度，以及保證初始縮放爲 1。這麼作表明了你 CSS 中的 1 像素等於 1 設備獨立像素，像這樣：

<meta name="viewport" content="width=device-width, initial-scale=1">
複製代碼

原則 #2：移動優先

你在一臺大筆記本電腦或桌面顯示器上開發網站，而且，一般狀況下你的客戶更在乎網站的桌面設計。所以，你可能天然以爲就先從桌面設計開始開發。可是，優先開發移動端其實更簡單，並且會讓你的代碼更少。

若是你先開發移動端，你將在開發中逐漸增長 CSS 的複雜度。你的手機視圖一般簡單許多，須要更少的 CSS。手機視圖一般永遠只有一列，缺乏許多額外的裝飾和效果。畢竟在更大的屏幕纔有空間展現它們。若你的開發「移動優先」，隨着你爲愈來愈大的媒體查詢增長樣式，你在補充設計。

若是你先開發桌面端，你已經有了全部的樣式，僅僅爲了撤銷你高級的桌面樣式，你就須要寫更多的 CSS。你寫了更多的 CSS，若是其中有一處不當心沒寫好，就會出現諸如佈局水平溢出或是文本大小不合適的問題。

經過移動優先，你將避免大量非必需的 CSS，使你的 CSS 更輕，網站更快。

原則 #3：根據內容設計

你能夠選擇使用 320 px，375 px，768 px 以及 1024 px 這樣的值做爲你的斷點（breakpoint）。它們對應了真實設備的寬度。這就是基於特定設備的設計。可是當新的設備變得更流行 (#375IsTheNew320)，在那些新設備上，你的設計看上去可能就不是很好了。

Stephen Hay，響應式設計工做流 的做者，建議你從小屏幕開始，接着「增長屏幕寬度直到醜出天際，是時候加入斷點了！」

專一於內容，讓你不得不把網站當成天然流動的佈局。你沒法只爲完美像素的寬度設計，由於這些寬度不存在。

經驗：當你想要行寬在 70 個字符左右時，那差很少等於（取決於字體！）36 到 40em。

原則 #4：在媒體查詢中使用 em

既然特定的設備寬度再也不重要，你也應該把像素單位的寬度斷點改爲 em 單位的寬度。你的媒體查詢基於內容。這樣一來，即便用戶把瀏覽器的基礎字體調大/調小或縮放瀏覽器，你的網站依然看上去很棒。

如此調整你設計的其他部分，讓你的網站更加健壯。

原則 #5：最小或最大寬度，只選一個

響應式設計實現了一個十分複雜的系統。當你的媒體查詢使用最小寬度和最大寬度，或是混合使用它們時，複雜度便極度增長，理解這個系統也更難了。

若是全部的媒體查詢「向上」或「向下」工做，而某個尺寸下你的網站看上去和預期不一樣時，你總能知道該看看哪兒的代碼。在新的媒體查詢中寫 CSS 永遠不會影響你以前已經寫好的屏幕尺寸。你只須要找出從哪一個媒體查詢之下（或上）去更新 CSS 就好。

原則 #6：避免固定的尺寸

將元素設置成固定的尺寸也許很吸引你。畢竟，你最喜歡的設計交接工具可能讓你輕鬆地拷貝它們。若是你不當心，固定寬度（或邊距）很容易破壞你的佈局。

嘗試把元素的尺寸設置成與它們的環境相關。使用百分比或者視口單位。避免設置 width 和 height，嘗試設置相應的 min- 和 max-。若是你發現 width 對佈局形成了破壞，一個 max-width:100% 能夠創造奇蹟。

原則 #7：使用現代佈局技術

基於上條原則，例如彈性盒子（Flexbox）和網格（Grid）的現代佈局方法，天生就很靈活，還能根據它們的環境改變大小。若是你使用這些佈局方法，你只須要更少的媒體查詢就能實現相同的設計。更少的媒體查詢意味着更少的事情須要你推理，而你的代碼也變得更簡單。

Every-layout.dev 上你能夠（從新）學習如何使用彈性盒子和網格佈局構建經常使用佈局。它列出了一些經常使用的佈局，而且解釋瞭如何使用現代技術構建它們。

原則 #8：爲字體渲染的不一樣預留空間

在一個不合適的換行處建立一個斷點很吸引你。爲了讓「像素完美」。固然，咱們知道 web 歷來沒有過所謂的「像素完美」。

若是你的斷點距離可讀的換行太近，它可能在你的瀏覽器可用。在不一樣瀏覽器和不一樣操做系統下有着不一樣的渲染方式。這意味着一行字可能會寬或窄幾個像素，從而破壞你的設計。

嘗試對你的媒體查詢寬鬆一點，用一些像素爲可能的錯誤預留一點空間，防止你的設計發生巨大的變化。

原則 #9：在瀏覽器內決定

爲了遵照這些規則，在設計工具裏建立全部斷點是不明智的。另外一方面，在瀏覽器內設計整個網站也很難。那麼折中辦法是什麼？

你可在設計工具裏建立設計，以及一些粗略的響應式版本。可是，在你在瀏覽器內工做時才能夠決定轉換到另外一個設計。Sketch 畫板的寬度多是 750 px，但若是你在瀏覽器內發現佈局已經在 44 em（至關於 704 像素）工做得很好，那麼就在 CSS 中使用 44 em。

原則 #10：嘗試 Polypane

經過 Polypane，以移動優先，內容優先的方式建立網站和 App 變得十分天然。從一個小面板開始設計你最小的屏幕。接着，添加一個新的面板，將它變寬直到它如同 Stephen 所說的 「醜出天際」。而後檢查面板的寬度，並用那個 em 值做爲你的新斷點。設置樣式而後不斷地重複直到完成。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。