創建響應式網站的簡單指南

已發表: 2020-10-13

您是否一直想知道有多少現代網站看起來如此“適合”，無論您使用何種設備查看它們？編寫響應式網頁是一種常見做法，現在在當今許多新網站中廣泛流行。響應式網頁通過調整自身大小以適應用於查看網站的設備的屏幕來執行一個巧妙的技巧。這意味著它們在 iPhone 或台式計算機以及介於兩者之間的所有設備上看起來都很棒。

這種“響應性”發生得如此無縫，以至於您甚至可能都沒有真正注意到它。出色的響應式網頁設計應在設備之間無縫流動，同時確保保持最佳瀏覽體驗。響應式網站已經從一個“不錯的”功能變成了現在任何網站都必須具備的功能。為什麼？很簡單，因為近年來使用移動設備進行在線瀏覽的人數猛增，而這種向移動設備（以及因此更小的屏幕）發展的趨勢並沒有放緩的跡象。

看看下面的數據（由 statcounter.com 提供）。您會看到迄今為止最流行的屏幕尺寸都很小（即移動屏幕）。

想像一下，如果所有這些數百萬用戶都必須在這些設備上查看無響應的網站。他們會非常沮喪，因為這需要做很多“捏和縮放”操作才能充分看到這些各自網站上的內容。這些用戶很可能會放棄這些網站，轉而使用響應式等價物。

如果失去潛在客戶不足以讓您相信擁有響應式網站的價值，那麼可能會考慮失去搜索排名。一段時間以來，谷歌一直在懲罰那些不為移動用戶提供某種形式的響應式或自適應設計的網站。這意味著如果您的網站在移動設備上不能很好地運行，那麼預計會受到排名懲罰。在手機上“工作得很好”是什麼意思？那麼，內容需要以用戶友好的方式顯示。這意味著它必須在沒有捏和放大的情況下可讀。它還需要快速加載（對 WordPress 緩存如何幫助您實現速度目標感興趣，然後看看這篇文章 'WordPress 緩存 - 它是如何工作的以及為什麼你應該使用它！'）

響應式網頁與自適應網頁

如果我們回顧一兩年，手機還沒有現在那麼流行。可以肯定的是，那些在允許您瀏覽網絡方面做得很好的產品直到 2005 年才真正開始出現（令人難以置信的是，iPhone 直到 2007 年才出現）。蜂窩網絡也無法承載大量數據，這意味著移動網絡瀏覽的機會有限。在過去的十年裡，這一切都發生了迅速的變化，為了在我們現在發現的新的移動驅動世界中更好地為客戶提供服務，網站不得不爭先恐後地迎頭趕上。

網頁設計師有幾種方法可以解決需要在移動屏幕上安裝“桌面”網站的問題。在早期，開發了獨立的“僅限移動”網站，與網站的主要“桌面”版本一起運行。這些通常在設計上相當粗糙，並且經常提供精簡的瀏覽體驗，忽略了它們更大的桌面兄弟的許多功能。

在此之後，自適應設計出現了。這使為專門設計的移動網站提供服務的唯一移動版本更進一步。創建多個靜態佈局，為用戶提供更具吸引力的移動瀏覽體驗。加載使用網站的設備的屏幕尺寸並提供最合適的尺寸。通常會構建六種尺寸以適應從大型桌面到移動設備的屏幕。然而，自適應設計有一定的局限性，而且絕對不是未來的證明，因為它無法滿足不完全屬於已構建的 6 個類別的屏幕尺寸。從設計的角度來看，它也是資源密集型的，因為必須構建 6 個版本的網站。

自適應設計的主要缺點是通過響應式設計解決的。響應式設計不是根據屏幕尺寸提供預先構建的佈局，而是根據設備調整它們的呈現方式。這意味著無論使用什麼設備（和相應的屏幕尺寸）查看網站，您都應該獲得一個美觀且用戶友好的網站。

響應式設計現在被認為是移動網站的行業標準。事實上，谷歌自己推薦響應式網頁設計。在本教程中，我們將讓初學者了解響應式設計以及如何將其應用於您的網站佈局。

響應式網站如何工作？

響應式網站使用所謂的 CSS 媒體查詢來根據屏幕寬度修改網站的佈局。 CSS Media Queries 是一個強大的工具，如果您對 CSS 有基本的了解，實際上部署起來相當簡單。在您深入構建響應式網站的過程之前，一個開始的地方是看一些活生生的例子。最好的方法是在台式機或筆記本電腦屏幕上。打開瀏覽器，例如 Chrome，然後前往熱門網站。您可能想在 pressidium.com 上嘗試我們自己的。

減小瀏覽器窗口大小，然後將鼠標懸停在瀏覽器窗口的右側邊緣，開始滑動窗口，使其變窄。您會看到，隨著它變小，網站的佈局也會發生變化。當網站達到預定義的大小（例如 1,000 像素寬）時，會觸發 CSS 媒體查詢，告訴瀏覽器使用與此屏幕寬度相關的 CSS 樣式。然後網站優雅地流動或響應這個新的屏幕尺寸並相應地顯示。相當聰明！

所以，現在我們對正在發生的事情有了基本的了解，讓我們深入了解細節，看看我們如何自己構建一個響應式網頁。

構建響應式網頁

我們不會在本教程中使用任何後端代碼，因此無需訪問服務器即可嘗試。只需在您的桌面上創建一個文件夾並將您的工作文件添加到其中。

第 1 步：HTML

在新文件夾中創建一個 index.html 文件。使用您喜歡的文本/代碼編輯器打開此文件，然後插入以下代碼：

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

第 2 步：外部 CSS

您將需要添加一個外部 style.css 文件。為此，請創建一個名為 style.css 的文件並將其放在與 index.html 文件相同的文件夾中。然後，添加以下代碼：

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

此時，如果您使用 Internet 瀏覽器（我們在此示例中使用 Chrome）打開 index.html 文件，您應該在頁面上看到如下內容：

現在讓我們看一下我們瀏覽器的開發者工具（同樣，我們在這個例子中使用了 Chrome）。打開 Chrome 並按 F12 並將其設置為在右側查看。

通過移動分隔符光標更改窗口大小，並實時觀察屏幕分辨率的變化。

第 3 步：CSS 相對單位

在我們的示例中，您會看到，如果將其拖動到 1396 像素寬，您會注意到帶有菜單的右側邊欄將移動到主要內容下方，因為它不再適合。

發生這種情況是因為我們在div#main上設置了 900px 的固定寬度，在 div div#sidebar上設置了 300px 的固定寬度。讓我們更改這些值的格式並改用百分比。（請注意，填充和邊距也計入寬度，因此這些值也必須轉換為百分比。）

完成這些編輯後，style.css 應如下所示：

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

這現在變得令人興奮，因為我們的頁面現在變得更具響應性！

雖然事情正在形成，但帖子區域需要更多的 CSS 編輯。寬度越小，郵箱就越“醜”。為了解決這個問題，我們需要編輯帖子 CSS 以實現更漂亮和響應更快的佈局。

您會注意到，僅當屏幕變窄時才會出現視覺問題。為了解決這個問題，我們將不得不使用一些 CSS 媒體查詢，以便在某個點之後產生更好看的佈局的備用 CSS 啟動。

我們將嘗試做的是將我們的“寬屏”3 列帖子區域轉換為 2 列區域，以便更好地適應更窄的屏幕。為了實現這一點，我們使用 CSS 媒體查詢。

第 4 步：CSS 媒體查詢

對於我們的“寬屏”模式，我們將引入這樣的 CSS 媒體查詢：like this @media screen and (min-width: 1396px) 。該查詢位於 CSS 樣式表的頂部，包含了我們希望在屏幕寬度至少為 1396 像素時運行的整個 CSS 集。

我們現在可以復制所有這些代碼並將其複製到我們的 CSS 樣式表中（將其複制並粘貼到當前 CSS 下方，以便在一個文件中擁有兩個相同的版本）。現在，編輯第二批 CSS 頂部的 CSS 媒體查詢以讀取@media screen and (max-width: 1395px) 。這現在告訴我們的瀏覽器，如果它小於1395px，那麼它應該運行這個 CSS。現在完成了，我們可以調整這個“較小”部分中的 CSS，以便它改變我們網頁的佈局，以便它更好地適應較小的屏幕。在這個例子中，我們將調整div.post的百分比，從 31.1% 調整到 45%。

您現在應該有一個如下所示的 CSS 文件：

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

現在帖子框對於寬度小於 1395 像素的屏幕具有不同的樣式，讓我們看看這在實際中是如何體現的：

好的！

你會注意到，在縮小和超過 760 像素寬之後，事情仍然變得很奇怪。

為了排序，我們可以使用以前從 3 列變為 2 列的相同技巧。不過這次我們將使用 760 像素的“斷點”並將 CSS div.post更改為 94%。如果我們這樣做，我們將得到三個 CSS 媒體查詢，它們應該如下所示：

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

我們的@media screen and (max-width: 760px) CSS 將包含我們編輯的div.post ，如下所示：

 div.post { width: 94%; float: left; padding: 2%; }

一切順利，當您將瀏覽器的寬度減小到 760 像素以下時，您現在應該會看到如下內容：

就是這樣！我們現在已經創建了一個可在更大屏幕、平板電腦和手機上運行的響應式網頁！

使用這個模板有更多的遊戲和嘗試其他 CSS 樣式。通過使用這個示例並應用各種 CSS 規則，可以學到很多東西，這些規則以後可用於構建漂亮且響應迅速的網站。

結論

如果您使用的是 WordPress 之類的 CMS，您可能想知道為什麼有必要深入研究為響應式網頁提供動力的底層 CSS 和媒體查詢。畢竟，任何編碼得體的 WordPress 主題都應該已經內置了響應式設計。雖然這是真的，但了解為什麼網站會根據某些瀏覽器寬度的行為方式會非常有幫助。有時，由於某種原因，主題作者添加的初始響應式設計也無法滿足您的需要。通過了解如何應用媒體查詢來更改在某些斷點處顯示的 CSS，您可以自由地繼續並應用導致所需外觀和功能的更改。

如果您打算構建自己的 WordPress 主題，那麼對媒體查詢的深刻理解是絕對必要的！希望這篇文章能讓您了解當今響應式網站的幕後情況。快樂的響應式編碼！