Responsive Web Design WordPress 認識 Themes 的結構，淺談如何使用CSS 制作響應式網頁設計

web wordpress : 2021-11-18 : 喵咪大人 : 5,100

WordPress 自訂佈景主題 (Custom Themes) 第二節

在上一章節中我們學會了如何建立屬於自己的佈景主題 (Themes)，接下來我們就應該去佈置我們的網頁版面，設計及豐富我們頁面內容了。可是在我們實行行動前，有一件事我要先告訴大家，希望大家先去認識清楚 WordPress Themes的一大特色 – 「響應式網頁設計」 (Responsive web design)。如果在沒有認清楚什麼是「響應式網頁設計」的前題下，先去做了網頁版面設計，那麼就很可能因為不附和WordPress的一些要求，最後只好推倒重來，不但浪費了時間，更令你的心血白費了。所以先認識「響應式網頁設計」是非常重要的一件事。

「響應式網頁設計」的起源，是因為現今社會上每人手上都可能有一台智能裝置，例如 smartphone, Tablets 等等。它們已經成為最主流的上網工具，但同時它們的設計又五花百門，螢幕大小都有不小的差別。傳統的網站設計已經不能滿足所有裝置的要求，為了附合主流要求，「響應式網頁設計」就順其自然的出現，滿足了一個網頁設計可以在大部份主流裝置如電腦﹑智能電話上運行。

我們先看看WordPress 的 Themes 在一台電腦上是如何顯示版面內容:

在上圖我們可以了解到，Themes 要在每一個 Page (頁面) 內顯示內容，比如一段文字及圖片等。如圖這些段落的文字或圖片都可以放在一個個Blog 內，這些版面的設計我們都可以用CSS 的 DIV 去分開切割，設定它們的大小﹑形狀﹑顏色以及擺放位置。我們可以想像成它們就是一塊塊的積木，而我們可以按我們想要的畫面把它們組合起來。

如果在一台電腦上顯示一個版面，我們可以加上一些靜態的CSS屬性數值，如圖上 Page 的寛(width)值就被定為 1440px ，意思就是在螢幕上你只可以看到這個數值大小的畫面，它不會隨著螢幕大小而改變。除了一些靜態的 CSS 屬性數值，我們也可以使用一些 CSS 動態的屬性數值，比如圖片中Blog 的大小和排位就是使用這樣的設計，這樣我們的版面就可以隨著螢幕的大小變化。而我亦建議大家多採用動態的屬性數值來設計，因為這是動態網頁設計的基本，也是很重要的一環。再接下來我們就來談談「響應式網頁設計」的一些基於知識。在 WordPress 的 Themes 設計中我們必定會使用的的原素有:

Body {
    Wrapper {
       Header{ .. }
           Main Content {
                         Menu 
                         Sidebar
                        }
      Footer { .. }
    Wrapper }
Body

在上圖我可以看到，我們在一個Page 內會使用到的原素以及他們的排版方法，其中我們可以看到一個比較特別的名字 Wrapper。它是用來控制我們在這一個Page內可使用的版面大小。如果我們將它的 CSS 寫成 #warpper { width: 900px; } 那麼 ID 叫 warpper 的 DIV 將會限制在900px; 而我們如果用在「響應式網頁設計」上會像以下這樣寫法:

#warpper { 
max-width: 900px;
width: 100%; }

這樣寫我們就可以得到一個隨螢幕大小變化，而最大可為900px 的DIV 。知道了這個方法後，我們在以後的 DIV CSS 寫法都可以按這方式來做。那麼我們就可以得到一個全自由變化的版面設計。

再下一步，也是很重要的一步，就是用CSS 來告訢我們的電腦什麼時候在電腦畫面跟移動裝置畫面間轉換。我們可以用到這句 CSS 來實行 :

@media only screen and (max-width: 500px) { }

以上這一句的意思就是當螢幕寛度最大不大於500px 時就執行以下 CSS。例如:
我們有一個 DIV 它的CSS 屬性是 #contentbox { width:900px; }。而當我們想要令它自動於行動裝置中轉換寛度，就可以這樣 :

#contentbox { width:900px; }
@media only screen and (max-width: 500px) {
#contentbox { width:100%; }
 }

用以上的CSS 就可以在螢幕寛度不大於500px時，寛值由900px轉換成100%，原因是在行動裝置比如智能電話上，螢幕都會比較小，我們都要盡量的用盡100%的寛度，以確保我們的文字及圖片不會太壓縮。所以在小型裝置上我們都會以一個區塊一個頁面的方式來顯示，把Page 的 Blog 分拆成一個個的區塊。 

而要更好地顯示我們的畫面，在我們的Header上的<head> </head>加上一句"viewport"的指令 :

<meta name="viewport" content="width=device-width, initial-scale=1" />

這是告訴我們的瀏覽器要用合適的比例來顯示我們的畫面。
最後加上一句img 的css 指令我們的圖片也可以跟隨螢幕大小而改變大小:

img {
    height: auto;
    max-width: 100%;
}

就是這樣，我們就可以得到一個在電腦跟智能裝置上自由轉換的「響應式網頁設計」了。 你學會了嗎? 如果你有什麼不懂的地方可以在下面的留言詢問喔! 我看到會回復你的。祝你有美好的一天 :)

可能感興趣: