RWD教學-只要兩行就能輕鬆見效的實作經驗

大家聽到RWD(Responsive Web Design)響應式網頁設計時，沒接觸過的人會覺得聽起來好像很難，尤其看到像是職訓或專門寫程式的人開教學或講座，一堂課動輒上千塊，非工程師背景的人即使有錢有閒買下課程，也會害怕學不會。

但其實實務上只需要用到CSS和HTML各一行，基本上可以同時適應電腦版和手機版的RWD網頁就能完成了。

不過不得不說，確實會一點CSS比較知道這兩行代表的意義以及實用性，但就算什麼都不懂，我也會舉例給你，相信經過這篇文章，未來你只要再去學習HTML和CSS，你就同時學會RWD了！

內容目錄

CSS的RWD做法

我們先看程式碼，這行要寫在CSS的檔案中：

@media screen and (max-device-width: 768px){
  /* CSS內容 */
}

這行的意思是，當系統偵測到裝置寬度低於768px時，就自動執行大括弧中的CSS內容。

於是通常會寫一種電腦版，配上一個RWD版本，如下：

/* 電腦版 */
body{
  background:red;
}

/* 行動裝置版 */
@media screen and (max-device-width: 768px){
  body{
    background:green;
  }
}

這樣一來，根據CSS相同項目設定會由後方設定覆蓋過前方設定的原則，當行動裝置寬度低於768px時，背景就會變成綠色的了。

歡迎大家透過F12網頁的開發人員工具進行測試！

F12網頁的開發人員工具

這裡簡單提一下F12開發人員工具，如下圖的截圖中，你在網頁按下F12之後會出現截圖中的畫面，上面那個區塊是HTML的部分；
下面那個區塊是當你點選上方HTML標籤後，該標籤的CSS設定。

接著，F12點選下圖紅色框起的按鈕，就可以看見你剛剛設定的手機版本樣式囉！

由於把網頁瀏覽器寬度直接縮放，跟裝置縮放是兩回事，因此若還想要達到網頁瀏覽器寬度縮放的效果，要把@media那行括號中的device拿掉，再根據你的測試抓適當的視窗寬度，範例如下：

/* 原本括弧中的內容是max-device-width */
@media screen and (max-width: 1000px){
 
  body{
    background:green;
  }
}

再來就是因為HTML要加入的內容，這可以避免你一個區塊一個區塊手動把文字內容放大，加入這行就可以讓裝置偵測你是網頁但用手機裝置顯示而自動調整：

<!-- 加在HTML的<head>標籤中 -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=1">

實務上有時候畫面比較寬資料量大時，會設initial-scale=0.6和minimum-scale=0.6，當然這是依據需求所做的調整。

但基本上只要加入了這行，再也不用擔心網頁的文字放在手機會小到完全看不到的困境，對超級新手前端是非常大的解藥！！

想當年我差一點點就要全部手動修改字體了…
還好在剛開始改的時候就多思考了幾秒突然覺得不太對，這麼先進的技術怎麼可能手機版要一個一個改CSS，才讓我查到這行拯救我前端人生的程式碼(淚~

學完這兩行對於RWD響應式設計重要的程式碼後，是不是覺得RWD網頁設計其實也沒這麼難呢？

雖然無論是HTML、CSS學習的過程還是充滿許多眉角，但要是能先透過這兩行程式碼帶你速成一個RWD網頁，我想必定能夠讓你在寫網頁的路上增加很大的成就感！