我們透過手機裝置打開連結，會發現某些網站會跑版得很嚴重。為了要讓網站除了在電腦上能夠好好被使用者瀏覽之外，也要能夠在手機裝置上呈現好的畫面，給予使用者好的體驗，增加使用者停留時間，或多或少都能影響在 Google 上的排名。特別是在現今，使用手機的比例已經高於電腦了，因此讓手機能夠順利瀏覽網站資訊，也是很重要一環。根據 Google 文件中，也有明確指出：
如果您尚未建立適合透過行動裝置瀏覽的網站，我們極力推薦您這麼做，因為大部分造訪您網站的人很可能都是使用行動裝置。
這時候來試試 RWD 中文名為響應式網頁設計 (Responsive Web Design) ，就是為了讓你的網站在各個裝置上都能給使用者有好的體驗。
一開始你要將網頁<head>區塊的地方加上
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
以上這些值用於規定裝置的結構規則，下表為各個值得說明：
再來就要圖片的地方加上以下CSS，讓圖片可以按照螢幕寬度來自動縮放：
img {
height: auto;
max-width: 100%;
}
最後一步就是設定 Media Queries 。
簡單的說，就是針對你的裝置，給你不同的樣式設定。
就是當寬度 < 768 px 時將載入下面這段 font-size 為 20px 的 CSS :
@media only screen and (max-width: 768px) {
p {
font-size: 20px;
}
}
當寬度 < 480 px 時，將載入下面這段 font-size 為 20px 的 CSS :
@media only screen and (max-width: 480px) {
p {
font-size: 20px;
}
}
當寬度 < 320 px 時，將載入下面這段 font-siz 為 20px 的 CSS :
@media only screen and (max-width: 320px) {
p {
font-size: 20px;
}
}
此回簡單介紹 RWD 的操作方式，下回使用實作來讓大家更懂 RWD 的使用意義。
iThome鐵人賽
看影片追技術