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

大家聽到RWD(Responsive Web Design)響應式網頁設計時，沒接觸過的人會覺得聽起來好像很難，尤其看到像是職訓或專門寫程式的人開教學或講座，一堂課 ... 跳至主要內容 旅遊優惠 票券優惠 美食景點分享 投資理財 股市投資 網路創業 被動收入 聯盟行銷 薯薯推薦 線上課程推薦 好書推薦 好物推薦 好活動推薦 專業技能 網頁設計 網路行銷 辦活動技巧 軟實力 關於我 responsive 大家聽到RWD(ResponsiveWebDesign)響應式網頁設計時，沒接觸過的人會覺得聽起來好像很難，尤其看到像是職訓或專門寫程式的人開教學或講座，一堂課動輒上千塊，非工程師背景的人即使有錢有閒買下課程，也會害怕學不會。

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

不過不得不說，確實會一點CSS比較知道這兩行代表的意義以及實用性，但就算什麼都不懂，我也會舉例給你，相信經過這篇文章，未來你只要再去學習HTML和CSS，你就同時學會RWD了！ 內容目錄 CSS的RWD做法HTML的RWD做法結論 CSS的RWD做法 我們先看程式碼，這行要寫在CSS的檔案中： @mediascreenand(max-device-width:768px){ /*CSS內容*/ } 這行的意思是，當系統偵測到裝置寬度低於768px時，就自動執行大括弧中的CSS內容。

於是通常會寫一種電腦版，配上一個RWD版本，如下： /*電腦版*/ body{ background:red; } /*行動裝置版*/ @mediascreenand(max-device-width:768px){ body{ background:green; } } 這樣一來，根據CSS相同項目設定會由後方設定覆蓋過前方設定的原則，當行動裝置寬度低於768px時，背景就會變成綠色的了。

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

GoogleChromeF12畫面說明 接著，F12點選下圖紅色框起的按鈕，就可以看見你剛剛設定的手機版本樣式囉！ 點選紅色框起處的按鈕進入RWD手機版測試 由於把網頁瀏覽器寬度直接縮放，跟裝置縮放是兩回事，因此若還想要達到網頁瀏覽器寬度縮放的效果，要把@media那行括號中的device拿掉，再根據你的測試抓適當的視窗寬度，範例如下： /*原本括弧中的內容是max-device-width*/ @mediascreenand(max-width:1000px){ body{ background:green; } } HTML的RWD做法 再來就是因為HTML要加入的內容，這可以避免你一個區塊一個區塊手動把文字內容放大，加入這行就可以讓裝置偵測你是網頁但用手機裝置顯示而自動調整： 實務上有時候畫面比較寬資料量大時，會設initial-scale=0.6和minimum-scale=0.6，當然這是依據需求所做的調整。

但基本上只要加入了這行，再也不用擔心網頁的文字放在手機會小到完全看不到的困境，對超級新手前端是非常大的解藥！！ (延伸閱讀：Radiobutton和Checkbox放大並自訂樣式) 想當年我差一點點就要全部手動修改字體了…還好在剛開始改的時候就多思考了幾秒突然覺得不太對，這麼先進的技術怎麼可能手機版要一個一個改CSS，才讓我查到這行拯救我前端人生的程式碼(淚~ 結論 學完這兩行對於RWD響應式設計重要的程式碼後，是不是覺得RWD網頁設計其實也沒這麼難呢？ 雖然無論是HTML、CSS學習的過程還是充滿許多眉角，但要是能先透過這兩行程式碼帶你速成一個RWD網頁，我想必定能夠讓你在寫網頁的路上增加很大的成就感！ 延伸閱讀：純CSS將Radiobutton美化與開關型整理(上) #RWD#程式設計#網頁小技巧 近期文章 內容行銷如何做更好？與讀者產生共鳴的2種因素 內容行銷是什麼？官網必做的3個內容行銷重點 同時經營部落格和自媒體的小技巧 部落格平台推薦：唯一推薦自由度最高的WordPress.org 股票基金差別在哪？ETF是什麼？最適合自己的3種投資起手式 文章分類旅遊優惠 票券優惠 美食景點分享 投資理財 股市投資 網路創業 被動收入 聯盟行銷 薯薯推薦 線上課程推薦 好書推薦 好物推薦 好活動推薦 專業技能 網頁設計 網路行銷 辦活動技巧 軟實力 關於我 為你推薦 內容行銷如何做更好？與讀者產生共鳴的2種因素 2022-03-04專業技能,網路行銷 內容行銷是什麼？官網必做的3個內容行銷重點 2022-03-01專業技能,網路行銷 同時經營部落格和自媒體的小技巧 2022-02-23專業技能,軟實力