隨著越來越多的移動裝置訪問網際網路，僅僅在計算機螢幕上看起來不錯的靜態網站設計已經不夠了。
更不用說，在進行設計時，您還必須考慮平板電腦、二合一膝上型電腦以及具有不同螢幕尺寸的不同智慧手機型號。
因此，將您的內容拍打成一列並稱之為退出並不會削減它。
通過響應式網頁設計，您可以確保您的網站在手機、平板電腦、膝上型電腦和桌上型電腦螢幕上看起來最好。
使用者體驗的改善意味著更高的轉化率和業務增長。
本指南將為您提供有關響應式網站設計的所有資訊，包括定義、分步演練、示例等。
- 什麼是響應式網頁設計？
- 響應式網頁設計與自適應設計
- 為什麼響應式設計很重要
- WordPress網站是否響應？
- 響應式網頁設計的基石
- 常見的響應斷點
- 如何使您的網站具有響應性
- 響應式設計的CSS單位和值
- 響應式設計示例
什麼是響應式網頁設計？
響應式設計是一種網頁設計方法，可讓您的網頁內容適應各種裝置的不同螢幕和視窗大小。
例如，您的內容可能會在桌面螢幕上分成不同的列，因為它們的寬度足以容納該設計。
如果您在移動裝置上將內容分成多個列，使用者將難以閱讀和互動。
響應式設計可以根據螢幕尺寸將內容和設計的多個獨立佈局交付到不同的裝置。
響應式網頁設計與自適應設計
響應式設計和自適應設計的區別在於響應式設計適應了單頁版本的渲染。相比之下，自適應設計提供了同一頁面的多個完全不同的版本。
響應式與自適應設計
它們都是重要的網頁設計趨勢 ，可幫助網站管理員控制其網站在不同螢幕上的外觀，但方法不同。
使用響應式設計，使用者將通過他們的瀏覽器訪問相同的基本檔案，而不管裝置如何，但CSS程式碼將控制佈局並根據螢幕大小進行不同的呈現。通過自適應設計，有一個指令碼可以檢查螢幕大小，然後訪問為該裝置設計的模板。
為什麼響應式設計很重要
如果您是網頁設計、開發或部落格的新手，您可能想知道為什麼響應式設計首先很重要。
答案很簡單。僅僅為單個裝置設計已經不夠了。行動網路流量已超過桌面，現在佔網站流量的大部分，佔比超過51%。
手機、平板、桌上型電腦市場份額
當超過一半的潛在訪問者使用移動裝置瀏覽網際網路時，您不能只為他們提供專為桌面設計的頁面。這將難以閱讀和使用，並導致糟糕的使用者體驗。
但這還不是全部。移動裝置上的使用者也佔搜尋引擎訪問量的大部分。
移動搜尋流量
最後，在過去幾年中，移動已成為最重要的廣告渠道之一。即使在大流行後的市場中，移動廣告支出也增長了4.8%，達到915.2億美元。
無論您選擇在社交媒體上做廣告還是使用YouTube SEO等有機方法，您的大部分流量都將來自移動使用者。
如果您的目標網頁沒有針對移動裝置進行優化且易於使用，您將無法最大限度地提高營銷工作的投資回報率。糟糕的轉化率將導致更少的潛在客戶和浪費的廣告支出。
WordPress網站是否響應？
WordPress網站是否響應取決於您的WP網站的主題。WordPress主題相當於靜態網站的模板，並控制內容的設計和佈局。
如果您使用預設的WordPress主題，例如Twenty Twenty，則該設計是響應式的，但由於它是單列設計，因此在不同螢幕上檢視時您可能不會意識到這一點。
如果您使用另一個WordPress主題，您可以通過比較它在不同裝置上的外觀或使用Chrome開發者工具來測試它是否響應。
響應式網頁設計的基石
在本節中，我們將介紹響應式網站設計的基礎及其不同的構建塊。
CSS和HTML
響應式設計的基礎是HTML和CSS的結合，這兩種語言可以控制任何給定Web瀏覽器中頁面的內容和佈局。
HTML與CSS（圖片來源：codingdojo.com）
HTML主要控制網頁的結構、元素和內容。例如，要將影象新增到網站，您必須使用如下HTML程式碼：
<img src="image.gif" alt="image" class=”full-width-img”>
您可以設定一個“class”或“id”，以後可以使用CSS程式碼作為目標。
您還可以控制HTML中的主要屬性，例如高度和寬度，但這不再被視為最佳實踐。
相反，CSS用於編輯包含在HTML頁面上的元素的設計和佈局。CSS程式碼可以包含在HTML文件的<style>部分中，或者作為單獨的樣式表檔案。
例如，我們可以像這樣在元素級別編輯所有HTML影象的寬度：
img {
width: 100%;
}
或者我們可以通過在前面新增一個句點來定位特定的類“full-width-img”。
.full-width-img {
width: 100%;
}
除了高度、寬度和顏色之外，您還可以控制設計。當您將CSS與一種稱為媒體查詢的技術結合使用時，像這樣使用CSS可以使設計具有響應性。
媒體查詢
媒體查詢是CSS3的基本部分，它允許您渲染內容以適應不同的因素，例如螢幕尺寸或解析度。
桌上型電腦、平板電腦、智慧手機的媒體查詢
它的工作方式與某些程式語言中的“if clause”類似，主要是在執行適當的程式碼之前檢查螢幕的viewport是否足夠寬或太寬。
@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}
如果螢幕至少有780畫素寬，“full-width-img”類影象將佔據螢幕的90%，並自動以同樣寬的邊距居中。
Fluid佈局
Fluid佈局是現代響應式設計的重要組成部分。在過去的好日子裡，你會為每個HTML元素設定一個靜態值，比如600畫素。
相反，Fluid佈局依賴於動態值，例如viewport寬度的百分比。
Fluid佈局示例
這種方法將根據螢幕大小動態增加或減少不同的容器元素大小。
Flexbox佈局
雖然基於百分比的佈局是流動的，但許多設計師和Web開發人員認為它不夠動態或不夠靈活。Flexbox是一個CSS模組，被設計為一種更有效的方式來佈局多個元素，即使容器內的內容大小未知。
彈性容器擴充套件專案以填充可用的可用空間或縮小它們以防止溢位。這些flex容器具有許多獨特的屬性，例如justify-content，您無法使用常規HTML元素對其進行編輯。
Flexbox容器
這是一個複雜的話題，所以如果你想在你的設計中使用它，你應該閱讀CSS Tricks的flexbox指南。
響應式影象
響應式影象最基本的迭代遵循與流體佈局相同的概念，使用動態單位來控制寬度或高度。我們之前介紹的示例CSS程式碼已經完成了這一點：
img {
width: 100%;
}
%單位近似於viewport寬度或高度的單個百分比，並確保影象與螢幕保持成比例。
這種方法的問題是每個使用者都必須下載完整尺寸的影象，即使在移動裝置上也是如此。
要提供針對不同裝置縮放的不同版本，您需要在img標籤中使用HTML屬性srcset，以指定多個可供選擇的影象尺寸。
<img src="small.jpg" />
WordPress自動將此功能用於帖子或頁面中包含的影象。
速度
當您嘗試為您的網站建立響應式設計時，載入速度應該是重中之重。
在2秒內載入的頁面的平均跳出率是9%，而需要5秒的頁面會導致38%的跳出率。
您的響應方法不能阻止或延遲您的頁面的第一次渲染超過它需要的。
有幾種方法可以使您的頁面更快。優化影象、實現快取、縮小、使用更高效的CSS佈局、避免渲染阻塞JS以及改進關鍵渲染路徑都是您應該考慮的好主意。
您也可以嘗試為您的移動頁面實施Google AMP，但在我們的Google AMP案例研究中，我們的移動潛在客戶下降了高達59%。
常見的響應斷點
要使用媒體查詢，您需要確定“響應式斷點”或螢幕大小斷點。斷點是您使用媒體查詢實現新CSS樣式的螢幕寬度。
常見的螢幕尺寸
- 手機：360 x 640
- 手機：375 x 667
- 手機：360 x 720
- iPhone X：375 x 812
- Pixel 2：411 x 731
- 平板電腦：768 x 1024
- 膝上型電腦：1366 x 768
- 膝上型電腦或桌上型電腦：1920 x 1080
如果您選擇移動優先的設計方法，以單列和較小的字型大小為基礎，則不需要包含移動斷點——除非您想針對特定模型優化設計。
移動優先設計（圖片來源：silocreativo.com）
因此，您可以建立一個只有兩個斷點的基本響應式設計，一個用於平板電腦，一個用於膝上型電腦和臺式電腦。
Bootstrap的響應式斷點
作為最早也是最受歡迎的響應式框架之一，Bootstrap引領了對靜態網頁設計的攻擊，並幫助將移動優先設計確立為行業標準。
結果，直到今天，許多設計師仍然遵循Bootstrap的螢幕寬度斷點。
Bootstrap響應斷點
他們使用媒體查詢來定位橫向手機 (576px)、平板電腦 (768px)、膝上型電腦 (992px) 和超大桌面螢幕 (1200px)。
如何使您的網站具有響應性
現在您已經熟悉了構建塊，是時候讓您的網站具有響應性了。
設定您的媒體查詢範圍（響應斷點）
根據您設計的獨特需求設定您的媒體查詢範圍。例如，如果我們想在設計中遵循Bootstrap標準，我們將使用以下媒體查詢：
- 縱向手機為576px
- 768px平板電腦
- 992px 用於膝上型電腦
- 大型裝置為1200畫素
使用百分比調整佈局元素或建立CSS網格佈局
第一步也是最重要的一步是根據媒體查詢或螢幕斷點為不同的佈局元素設定不同的大小。
您擁有的佈局容器的數量將取決於設計，但大多數網站都關注下面列出的元素：
- 包裝器或容器
- 標題
- 內容
- 側邊欄
- 頁尾
通用佈局
使用移動優先的方法，您可以像這樣設定主要佈局元素的樣式（無需對手機的基本樣式進行媒體查詢）：
#wrapper {width:95%; margin: 0 auto; }
#header {width:100%; }
#content {width:100%; }
#sidebar {width:100%; }
#footer {width:100%; }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
#wrapper {width:90%; margin: 0 auto; }
#content {width:70%; float:left; }
#sidebar {width:30%; float:right; }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
#wrapper {width:90%; margin: 0 auto; }
}
在基於百分比的方法中，“float”屬性控制元素將出現在螢幕的哪一側、左側或右側。
如果您想超越基礎並建立尖端的響應式設計，您需要熟悉CSS flexbox佈局及其屬性，如box-sizing和flex。
實施響應式影象
如前所述，確保影象不會損壞的一種方法是僅對所有圖片使用動態值。
img {
width: 100%;
}
但這不會減少移動訪問者訪問您網站時的負載。
當您將影象新增到頁面時，請確保srcset始終包含具有不同尺寸照片的內容。
手動執行此操作可能非常耗時，但使用WordPress等CMS時，它會在您上傳媒體檔案時自動發生。
網站文字的響應式排版
響應式網頁設計的主要焦點是佈局塊、元素和媒體的響應性。文字通常被視為事後的想法。
但是對於真正的響應式設計，您還應該適當地調整字型大小以匹配螢幕大小。
最簡單的方法是為font-size設定一個靜態值，比如22px，並在每個媒體查詢中調整它。
字型大小與檢視大小散點
您可以同時定位多個文字元素，方法是使用逗號分隔每個元素。
@media (min-width: 992px) {
body, p, a, h4 {
font-size: 14px;
}
}
測試響應能力
首先，您想通過Google的移動裝置友好測試來測試您的網站是否適合移動裝置。只需輸入您網站的URL，然後單擊“Test URL”按鈕即可獲得結果。
谷歌的移動友好測試
如果獲取您的網站需要一段時間，請不要擔心。這並不能反映您的頁面載入速度。
如果您按照本文中概述的步驟操作，則應該說您擁有一個適合移動裝置的網站。
然後，您想使用Chrome開發人員工具等工具在多種螢幕尺寸上測試您的網站。
在Windows計算機上按 CTRL + Shift + I 或在 Mac 上按 Command + Option + I 開啟相關裝置檢視。從這裡，您可以選擇您選擇的移動裝置或平板電腦來測試您的設計的響應能力。
在Chrome中測試響應式和移動佈局
在完成此過程時，您需要回答幾個問題。
- 佈局是否調整到正確的列數？
- 內容是否適合不同螢幕上的佈局元素和容器？
- 字型大小適合每個螢幕嗎？
響應式設計的CSS單位和值
CSS有絕對和相對測量單位。絕對長度單位的示例是cm或px。相對單位或動態值取決於螢幕的大小和解析度或根元素的字型大小。
PX vs EM vs REM vs Viewport Units用於響應式設計
- PX – 單個畫素
- EM – 基於元素字型大小的相對單位。
- REM – 基於元素字型大小的相對單位。
- VH, VW – Viewpoint高度或寬度的百分比。
- % – 父元素的百分比。
新的網頁設計師或開發人員可能應該堅持使用畫素作為文字，因為它們是CSS中最直接的長度單位。
但是在設定影象和其他元素的寬度和最大寬度時，使用%是最好的解決方案。這種方法將確保元件適應每個裝置的螢幕尺寸。
響應式設計示例
下面我們將介紹一些來自不同行業的響應式網頁設計示例——並從他們的對錯中學習。
1. 線上報紙：紐約時報
手機、平板電腦和膝上型電腦上的《紐約時報》
在桌面上，《紐約時報》的佈局讓您想起傳統報紙，擠滿了視覺效果和不同行和列的內容。每個類別的新聞似乎都有一個單獨的列或行。
在移動端，它符合單列標準，還將選單調整為手風琴格式，以便於使用。
2. 部落格：The Art of Non-Conformity
移動裝置、平板電腦和膝上型電腦上的The Art of Non-Conformity
Chris Guillebeau的部落格“The Art of Non-Conformity”十多年來一直很受歡迎。雖然該設計不是最前沿的，但它具有響應性，並將兩列側邊欄和主要內容佈局調整為移動裝置上的單列設計。
3.電子商務：亞馬遜
移動裝置、平板電腦和膝上型電腦上的亞馬遜
亞馬遜之所以成為電子商務領域的全球領導者是有原因的，他們的使用者介面在所有裝置上都非常流暢。
他們的平板電腦佈局只是刪除了一些空白區域，並新增了一個可滾動的圖示部分，以將更多內容放入較小的包中。
他們的移動佈局將其集中在一個列中，專注於基本要素，例如最近的購買歷史，而不是主頁上的不同部分連結圖示。
4. 視訊網站：YouTube
移動裝置、平板電腦和膝上型電腦上的YouTube
YouTube主頁設計的核心是與每個使用者相關的靈活視訊網格。在平板電腦上，每行的列數減少到三。在移動裝置上，它被簡化為單列設計。
移動版還將主選單移至螢幕底部，更靠近智慧手機使用者的拇指。這個簡單的舉動改善了導航和使用者體驗。
5. 線上雜誌：Wired
在手機、平板電腦和膝上型電腦上Wired
Wired的響應式網頁設計方法專注於在所有較小的螢幕上實現單列布局，從平板電腦開始。
這是一個基本佈局，但更容易吸引使用者關注熱門故事和他們的CTA訂閱。
小結
響應式網頁設計有很多不同的元素。如果沒有對HTML和CSS的基本瞭解，很容易出錯。
但是通過熟悉不同的構建塊、使用Web開發工具分析示例以及使用示例程式碼進行測試，您應該能夠使您的網站響應式響應而不會出現任何重大問題。
評論留言