現在越來越多種類的裝置出現，包括電腦、平板、手機，我們會在不同大小的螢幕上瀏覽網頁，究竟網頁要如何在所有設備上，都能顯示適合該裝置的排版模式？在過去會根據裝置來給予不同的 CSS 檔案，現在我們常採用、不能不提的就是 — RWD。
RWD（Responsive Web Design，響應式網站設計），是一種能夠針對不同的螢幕大小，在同一份檔案去設定不一樣的排版、樣式，讓網頁能夠在每個裝置上都能有最佳的瀏覽體驗。
Viewport 的作用是告訴瀏覽器，視窗大小變化時，網頁內容的該如何縮放。
在 HTML 的 <head></head> 裡設定 Viewport：
<meta name="viewport" content="width=device-width, initial-scale=1">
左側為沒有使用/右側有使用 Viewport，引用自w3schools-RWD
Media Query 是一種條件式的 CSS 設定，在同一份 CSS 檔案，你可以針對不同大小的螢幕去設定斷點(Break Point)，控制不同的排版並調整 CSS 的樣式。
// 當螢幕大小在480px以下，設定body背景為紅色
@media screen and (max-width: 480px) {
body {
background-color: #C98986;
}
}
做網頁不只要考慮到電腦，在行動裝置上的使用體驗也是很重要，根據上面兩個步驟來使用 RWD 響應式網頁設計，除了讓網頁可以滿足不同的螢幕大小，也因為只需要管理一個網站，減少了維護與開發成本。學會了寫 CSS 之後，接下來我們會提到如何建立易讀易寫的規則系統，優化 CSS 的維護與管理。那我們就下一章再見囉！
如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️
iThome鐵人賽
看影片追技術