【伯樂線上提示】：① 5月6日，谷歌開發者中心推出了一個 Web 開發最佳實踐手冊。伯樂線上資源頻道摘編該資源後，已邀請一些關注 Web 開發的朋友參與翻譯手冊。② 由於譯者朋友幾乎都是已在職，都是在工作之餘參與，每位的翻譯進度會不一樣（請理解），所以手冊中文版不會按照英文版章節順序釋出。③ 手冊中文版尚不完整，請不要轉載，謝謝合作。
【導讀】：網頁可以通過大量不同型別裝置上進行訪問，這些裝置小到手機，大至電視。每種裝置既有各自的獨特優點，又有自身的限制。作為一個web開發者，你的程式應該支援所有型別的裝置。
本課內容：
- 新增一個視口（viewport）
- 使用簡單的樣式
- 設定首個臨界點
- 限制設計介面的最大寬度
- 改變內邊距和減少文字尺寸
- 調整元素以適應寬視口
- 結束語
我們著手建立一個網站，可以執行於多尺寸螢幕、不同型別裝置上。在前一篇文章中，我們精心構建了網頁的資訊架構，建立了一個基本結構。在本指南中，我們將結合基本結構與內容，把它製作成一個漂亮的網頁，可自適應不同的螢幕尺寸。
根據“移動優先”（Mobile First）的web開發原則，我們從窄視口開始 — 類似於手機 — 並首先形成經驗。然後，我們擴充套件至更大的裝置類。我們可以使檢視變得更寬，判斷設計、佈局是否合適。
早些時候，我們建立幾個不同的高層次設計，解決如何顯示我們的內容。現在，我們需要讓頁面適應這些不同的佈局。我們是這樣做的：基於內容適應螢幕大小，決定臨界點的位置 — 佈局和樣式發生改變的一個值點。
簡而言之
- 總是使用視口
- 總是從窄視口開始，然後擴充套件
- 當需適應內容時，設定臨界點開關
- 建立跨多臨界點的高階視覺佈局
新增一個視口
即使對於一個基本頁面，你必須始終包含一個viewport 後設資料標籤。視口是建立多裝置體驗的最重要的組成部分。沒有它，你的網站將無法良好執行於移動裝置上。
視口用於提示瀏覽器：網頁頁面需要進行調整以適應螢幕範圍。你可以為視口指定多種配置，以控制頁面的顯示。我們推薦一個預設值：
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
視口元素位於文件頭部，僅需宣告一次。
相關資訊
瞭解更多關於使用視口的最佳實踐：
使用簡單的樣式
我們公司及產品根據樣式指南，提供了一個非常具體的品牌、字型指導方針。
樣式指南
樣式指南是深入認識頁面的視覺化表達的有效途徑。它有助於確保設計首尾風格一致。
新增樣式化圖片
在前篇指南中，我們新增了所謂的“內容圖片”。這些圖片對於描述我們產品很重要。樣式圖片不是核心內容的一部分，但增添了視覺衝擊力，或引導使用者注意力至特定內容。
這方面的一個很好的例子是：頂部內容的標題圖片。它經常被用來吸引使用者閱讀更多的產品。
它們可以非常簡單地包含進來。在我們的例子中，樣式圖片為背景，應用簡單的css即可。
|
1 2 3 4 5 6 7 |
#headline { padding: 0.8em; color: white; font-family: Roboto, sans-serif; background-image: url(backgroundimage.jpg); background-size: cover; } |
我們選擇了一張模糊的簡單背景圖片，因此並不會影響網頁內容。我們將它設定為cover，並總是以拉伸同時保持正確縱橫比的方式來遍佈整個元素。
設定首個臨界點
當寬度大約為600px時，設計開始變得糟糕。在我們的例子中，行的長度會超過10個字（最佳的閱讀長度），而這正是我們需要調整的地方。
600px似乎是我們建立第一個臨界點的良好位置，因為它確定了範圍，重新定位元素，使之更好地適應螢幕。我們使用一種稱為“媒介查詢（Media Queries）”的技術，可做到這一點。
|
1 2 3 |
@media (min-width: 600px) { } |
更大的螢幕意味著擁有更多的空間，因此，在如何顯示內容的問題上具有更強的靈活性。
注意
- 無須馬上調整所有元素，必要時進行微調
從當前我們產品頁面的效果看來，接下來我們需要：
- 約束設計的最大寬度
- 修改元素內邊距和減少文字尺寸
- 移動表單，與標題內容浮動對齊
- 確保視訊浮動於內容周圍
- 減少影像尺寸，顯示於更合適的網格
相關資訊
瞭解更多關於使用“媒介查詢”的方式和位置：
限制設計介面的最大寬度
我們僅選擇兩大布局：窄視口和寬視口：這大大簡化了構建過程。
我們決定，在窄視口中建立全幅部分，並且在寬視口中仍保持全幅。這意味著我們應限制螢幕的最大寬度，使得文字、段落不延伸成一長單行，出現超寬螢幕。我們選擇800px作為最大值。
為了實現這個目標，我們需要限制寬度，並將元素置於中心。在每個主要區域中，我們需要建立一個容器，將其外邊距（margin）設為auto。這允許螢幕增大，但內容仍處於中心，最大尺寸為800px。
如下所示，容器是一個簡單的div：
|
1 |
<div class="container">...</div> |
|
1 2 3 |
<div id="section1"> <div class="container"> <h2>What will I learn?</h2> |
|
1 2 3 4 |
.container { margin: auto; max-width: 800px; } |
改變內邊距和減少文字尺寸
在窄視口中，我們沒有大量空間來顯示內容。因此，排版尺寸和磅值往往需大幅減少，以適應螢幕。
在更寬視口中，我們需要考慮使用者傾向於更大的螢幕，甚至更大。為了增加內容的可讀性，我們可以增加排版的尺寸和磅值，也可以改變內邊距，以使不同區域更加明顯。
在我們產品頁面中，我們通過設定寬度方向的內邊距為5%，以增加區域元素的內邊距。我們也將增加每個部分頂部的大小。
|
1 2 3 |
#headline { padding: 20px 5%; } |
調整元素以適應寬視口
窄視口以線性方式堆疊顯示。每個主要區域及其裡面的內容是依次從上到下排列。
寬視口提供了額外的空間，使得內容能以最佳方式呈現在螢幕上。對於我們的產品頁面，根據資訊架構，意味著我們可以：
- 移動表單，貼近頭標題資訊
- 將視訊放在重要功能列表右邊
- 平鋪影像
- 展開表格
使表單元素浮動
窄視口意味著擁有較少的橫向空間，不能充裕地放置螢幕上的元素。
為了更有效地利用螢幕的橫向空間，我們需要打破頂部的線性流式佈局，移動表單和表項，使得彼此緊鄰。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#headline #blurb { float: left; font-weight: 200; width: 50%; font-size: 18px; box-sizing: border-box; padding-right: 10px; } #headline #register { float:right; padding: 20px; width: 50%; box-sizing: border-box; font-weight: 300; } |
|
1 2 3 |
#headline { padding: 20px 5%; } |
使視訊元素浮動
在窄視口中，將視訊設計為佔螢幕的整個寬度，放置在重要功能列表後面。在寬視口中，當視屏位於功能列表後面時，視訊變得太大，看起來不合適。
視訊元素需移出窄視口的垂直流式佈局，應與內容的專案符號列表並列顯示。
|
1 2 3 4 5 6 7 8 9 10 11 |
#section1 ul { box-sizing: border-box; float: left; width: 50%; padding-right: 1em; } #section1 video { width: 50%; float: right; } |
平鋪圖片
在窄視口（大部分移動裝置）介面中，影像設定為螢幕的整個寬度、垂直堆疊。這在寬視口中得不到很好地擴充套件。
為了使圖片在寬視口中看起來合適，將圖片寬度縮放容器的30%，水平放置（而不是窄視口的垂直放置）。我們還將增加邊框半徑和盒子陰影（box-shadow），使影像看起來更吸引人。
|
1 2 3 4 5 6 7 |
#section2 div img { width: 30%; margin: 1%; box-sizing: border-box; border-radius: 50% 50%; box-shadow: black 0px 0px 5px; } |
讓圖片自適應DPI
使用圖片時，要考慮視口大小、顯示解析度。
在過去，網頁專為96dpi螢幕而設計。隨著移動裝置的出現，我們已見證了螢幕畫素密度的逐漸增大，更別說膝上型電腦的Retina螢幕了。因此，被編碼為96dpi的影像，往往在高保真dpi裝置上看起來很糟糕。
我們有一個還沒被廣泛採用的解決方案。對於支援該方案的瀏覽器，你可以在高分辨顯示器上顯示高畫素的影像。
|
1 |
<img src="photo.png" srcset="photo@2x.png 2x"> |
相關資訊
瞭解更多關於針對不同螢幕解析度有效使用圖片：
資料表格
表格很難合適地展示在窄視口的裝置上，需要特殊考慮。
在窄視口中，我們建議將表分成兩排，把標題和表格單元調到一排，呈列狀。
在我們的網站中，必須單獨為表格內容建立一個額外的臨界點。由於最初是為移動裝置構造網頁，去掉已應用的樣式是困難的，所以我們必須在寬視口css中關閉窄視口下表格的部分css。這向我們呈現了一個明確、連貫變化。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
@media screen and (max-width: 600px) { table thead { display: none; } table td { display: block; position: relative; padding-left: 50%; padding-top: 13px; padding-bottom: 13px; text-align: left; background: #e9e9e9; } table td:before { content: attr(data-th) " :"; display: inline-block; color: #000000; background: #e9e9e9; border-right: 2px solid transparent; position: absolute; top: 0; left: 0; bottom: 0; width: 33%; max-height: 100%; font-size: 16px; font-weight: 300; padding-left: 13px; padding-top: 13px; } } |
結束語
祝賀你。當你閱讀至此，你可建立你第一個產品的簡單登陸頁面，可跨大量不同裝置、不同比例的表單、以及不同螢幕尺寸。
如果你遵循這些原則，你將有一個良好的開端：
01 寫程式碼之前，建立一個基本的資訊架構和清楚需要的內容
02 總是設定一個視口
03 移動優先，形成基本的經驗
04 一旦擁有移動經驗，增加顯示器的寬度，直到網頁看起來不合適，並在此設定臨界點
05 不斷迭代