根據Google的統計，有將近 60% 的人們使用手機瀏覽網站，如果沒有重視手機上的網站呈現效果，可能會流失相當多的潛在客戶。
而講到手機網頁，就會提到響應式網頁設計 (Responsive Web Design) 這個設計方式，但有很多人會搞不清楚手機版和 RWD 網頁有甚麼不同，我們首先就來釐清兩者的差異吧！
一般來說，「手機行動版網站」和電腦版網站是分開另外製作的，管理者要更新網站內容就必須分兩次更新，若是沒有後台管理系統，又委託給不同設計公司作電腦版跟手機版網站時，資料更新就會時常不能同步。
而「RWD 網站」相對較人性化，它運用相同的 HTML 程式碼，透過 CSS 來調整網頁在裝置上的呈現方式，所以只需要單一網址，管理者在做更新和維護時，只需要更新一個版本，減少了工程師的處理時間。 RWD 的目的是希望網頁在各種不同裝置上都可以提供使用者最佳體驗、舒服的閱讀，又稱做「適應性網頁設計」。
接著來看看如何製作簡單的RWD網頁吧！
在<head>中加入
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport 用來控制行動裝置顯示網頁內容時的一些設定，
上方程式是在指定螢幕寬度為裝置寬度，畫面載入初始縮放比例為 100%
<meta name=”viewport”>支援屬性與說明
圖片來源：https://medium.com/frochu/html-meta-viewport-setting-69fbb06ed3d8
下一次會針對圖像、文字及 Media Queries 做響應式的設計～
參考資料：
https://www.ibest.tw/page01.php
https://www.ibest.tw/p05.php
iThome鐵人賽
看影片追技術