RWD教學入門:響應式網頁設計的實作方法 | rwd寫法
在學習網頁前端開發時,不可避免地一定會常聽到RWD這個詞,可能隱約也講的出像是「什麼響應式的」、「一種網頁設計方式」、「手機也可以用的網頁」的概念,但仍舊有些一知半解。本文將嘗試用簡單的方式,重新整理各種RWD相關的資訊,由淺入深來介紹RWD。入門網頁設計,3分鐘小測驗,找到你的學習起點[1]RWD基本概念RWD(ResponsiveWebDesign)中文翻作「響應式網站設計」,是一種為了讓網頁在各種尺寸的裝置下,畫面都能呈現合適比例的設計原則。有一種更容易理解RWD概念的比喻是「內容就像水」。當你在設計網站排版時,能根據RWD的設...
在學習網頁前端開發時,不可避免地一定會常聽到 RWD 這個詞,可能隱約也講的出像是「什麼響應式的」、「一種網頁設計方式」、「手機也可以用的網頁」的概念,但仍舊有些一知半解。
本文將嘗試用簡單的方式,重新整理各種 RWD 相關的資訊,由淺入深來介紹 RWD。
入門網頁設計,3 分鐘小測驗,找到你的學習起點[1]
RWD 基本概念RWD(Responsive Web Design)中文翻作「響應式網站設計」,是一種為了讓網頁在各種尺寸的裝置下,畫面都能呈現合適比例的設計原則。
有一種更容易理解 RWD 概念的比喻是「內容就像水」。
當你在設計網站排版時,能根據 RWD 的設計原則實作,網站內容就會像水一般,在各種裝置中自然的流動成最適當的樣子。
上圖以 Medium[2] 為例,當你試著調整視窗寬度時,會發現網頁內容隨著寬度變小而變換版面,我們就可以說這個網站符合 RWD 的設計原則。
為什麼要用 RWD近幾年隨著行動網路的取得越來越方便,更多的使用者開始使用各種不同裝置來上網。
許多網站因應這樣的趨勢將服務面向使用手持裝置的使用者,除了將網站服務另外開發成手機 APP、使用行動版網站(像是 Facebook 手機版[3])等,但這些方法都需要較大的成本去維護。
而 RWD 這樣單純使用 CSS 媒體查詢控制版面的設計方式,不管什麼裝置都在同一個網站上開發,在維護及成本的考量上就具有相對大的優勢,且在分享、搜尋排名上也都比一般行動版網站來得好。
進一步學好前端基礎,申請 5 天免費試讀[4]
RWD 基本實作方法要將網頁使用 RWD 實作有以下幾步設定與做法:
設定 viewport 決定 RWD 設計模式 套用 CSS media query 使用相對單位設定寬高、大小 1. 設定 viewportviewport(檢視區)指的就是瀏覽網頁時瀏覽器顯示畫面內容的區域。
而在針對要實作 RWD 的網頁中...