回溯到 2012 年 12 月，Mashable 宣佈 2013 年為 “響應式網站設計年”。甚至在此之前，響應式網站設計還是一個模糊的概念，但自從那時候開始，它已變得無所不在。
如果您近期尚未建立任何新的網站，您可能會不太清楚什麼是響應式網站，為什麼您會需要這樣的網站，以及自己要如何製作一個響應式網站。讓我們一起往下看。
什麼是響應式網站？
您可能會想知道：為什麼同一個網站在我的手機上和在我的電腦上看起來不同？這並不是個意外。它是被專門設計過的。
使用響應式網站設計能夠使同樣一個網站以不同的形式出現在不同的裝置上。
那麼，到底什麼是響應式網站以及響應式設計呢？
如果您不是網站設計領域中的工作者，那麼您對這個術語可能不是那麼地熟悉，即使該術語已從一個趨勢到現在被實踐。
從本質上來說，響應式網站是考慮到您正在瀏覽的網站的上下文。具體來說，這通常代表著您正在瀏覽網站的設備。
然而，響應式網站回應的其實並不是瀏覽器或是裝置類型，而是視窗大小。
audi.com 是在 2001 年第一個根據視窗大小進行變更的網站。在當時，這個想法是相當的新穎，以至於在 Netscape Navigator 網頁瀏覽器中，每次要更改視窗大小時都必須重新加載頁面。
至少從那時候起，事情開始有了些進展。
今日，響應式設計使用 CSS (階層式樣式表，其中儲存著所有您的網頁的樣式文件) 去建立網站上不同的格式、圖片尺寸，以及適用於不同視窗大小的選單。
為什麼您需要使用響應式設計？
如果還是不那麼清楚，您應該致力於讓您的網站具有彈性，如此一來，無論使用者是在手機，平板或是電腦上訪問您的網站，他們的體驗仍然會是最佳的。
2014 年是首次行動裝置上的網站流量多於桌機的一年，而今日，使用者在其行動裝置上所花費的時間則佔了他們 59% 的時間。
顯然地，桌機型的響應式網站設計的時代已經結束了。
但同時，使用者還是會花上他們 41% 的時間在使用桌機，因此，即使使用行動裝置的比例成長，您還是不能忽略桌機使用者。
那行動裝置專屬的網站 (mDot) 呢？
有時候，您會注意到在行動裝置的瀏覽器上瀏覽網頁時，網頁會加載為“m.example.com”，而在桌機上瀏覽時，網頁則會加載為 “www.example.com”。那麼，這是一種響應式設計嗎？
並不完全是這樣。在這種情況下，用戶體驗似乎被多種裝置納入考量，但在實際上，這是因為網站所有者建立了兩個單獨的網站，一個用於行動裝置，一個用於桌機。
一個網站位於子域名 “m” 上，而另一個網站則位於子域名 “www” 上（或者它可能位於裸域名上）。
這樣做的好處是，您可以使用 CSS 的技術去客製化無法透過響應式設計建立的行動裝置體驗。您可能會想要向行動裝置的用戶強調您網站上完全不同的元素，又或者基於行銷活動的因素，您可能想要將行動裝置的用戶導向一個獨立的銷售管道。
缺點是您的網站流量在實際上會被分成為兩個不同的網頁。任何 SEO 從行動用戶登陸 m.example.com 網頁上帶來的效益都不會轉換到 www.example.com。
響應式網站要如何製作呢？
這將取決於您想要如何建立您的網站，您有多大的抱負，並是否有能力學習新的技能。
網站產生器中的 “內建” 響應式設計
您可以透過網站產生器線上設計您的網站，其通常具有將回應式設計 ”內建” 的設計工具。通常您可以在設計的過程中，透過在桌機與行動裝置間切換的方式來查看您的網站在行動裝置上的外觀。
這是整合回應式設計最簡單的方法，因為實際上，所有這些都已為您預先編碼和預先組合。
在您的內容管理系統 (CMS) 中使用響應式主題
如果您想要使用 WordPress 這類型的 CMS 去建立您的網站，而且出於某種原因您希望網站具有響應式的設計，那麼您就可以為您的網站選擇包含響應式設計的主題。
與網站產生器的 ”內建” 響應式設計相似，網站的回應能力與主題會預先被整合成一個套組。
⚠️ 接下來，我們將深入討論基本的 HTML 編碼 ⚠️
將響應式設計整合到您的網站程式碼中
但是，如果您需要在您的 CMS 上客製您的網站主題，或者您正在製作自己的網站主題，那麼您可能需要了解一些關於響應式設計元素。
當然，我們無法全面地涵蓋所有設計的注意事項，但我們仍然可以為您提供您所需的基本工具。
可視區域
“可視區域” 是指用戶可以查看的網頁區域。在響應式設計變得熱門前，網頁是針對桌機所設計出的相對寬幅螢幕，其被壓縮至狹窄的行動螢幕中的 “可視區域” 中。
這個結果顯然不那麼理想。
最後，將視角設置為與設備同等效果的方法被帶入了 HTML。具體來說，這是透過 HTML 標題中的 <meta> 標籤完成的。
<meta> 標籤範例如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
圖像
如果圖像超出可視區域 (如果它比正在瀏覽的屏幕更寬)，則用戶除了上下滾動外，還必須要左右移動才能瀏覽內容，而這通常是我們不希望發生的。
為修正這個問題，您可以對具有不同寬度屬性的圖像設定樣式。
另一個方法是使用相對寬度，其中圖像會佔據螢幕或它們所在元素的特定百分比。它看起來像這樣：
<img src="image.jpg" style="width:100%;">
您也可以設定最大寬度，這表示圖像永遠不會超過您所設定的最大寬度，但是會在較小的屏幕上縮小。
範例如下：
<img src="image.jpg" style="max-width:100%;height:auto;">
文字檔
您還可以根據螢幕大小去重新設定文本大小。通常文本的大小會以 “pt” 為單位，您也可以以 “vw” 作為 “視角寬度” 來衡量其大小。這讓您可以依照正在瀏覽的螢幕大小設定相對的文本大小。
媒體樣式 (Media queries)
媒體樣式是 CSS 中使用的一種響應式設計技術。它們使您可以設定 “斷點”，以使您的網站樣式和佈局在特定尺寸的螢幕上成為您想要的樣式，而在另一種尺寸的螢幕上則會是另一種樣式。“斷點” 是寬度的變化。
您可以根據行動裝置進行設計，並使用您的媒體樣式去為特定寬度或更寬的螢幕設定特殊條件：
@media only screen and (min-width: 600px) {
...
}
或相反：
@media only screen and (max-width: 600px) {
...
}
您可以將其用來控制幾乎所有內容的條件。它不會做任何事情來改善用戶體驗，但是您可以使用它來使文本顏色在特定的螢幕寬度上從藍色變成紅色。我們將這部份的練習保留給您，您可以試著找出如何更有創意地使用這個功能並讓您受益其中。
在任何情況下，網站回應用戶所用來瀏覽的設備大小是任何專業網站都不可缺少的功能。
儘管您可能需要像 CMS 主題或網站生成器中那些預設套組，但我們也希望您可以花時間嘗試一些 CSS 和 HTML 的響應式設計元素。畢竟，沒有比動手嘗試更好的學習方法了。
Tagged in Nom de domaine簡易代管
