RWD 響應式網站是什麼?如何設計符合使用者需求的網站? | rwd軟體推薦
根據Google統計數字表示,有超過60%的使用者使用手機瀏覽網頁,而每一種行動裝置各有不同的螢幕解析度。一個好的網站,得讓使用者在瀏覽網站時有最好的體驗,在各種裝置上都能清楚閱讀網頁內容。因此,RWD響應式網站誕生。 響應式網頁設計,英文為「ResponsiveWebDesign」,通常縮寫為RWDdesign。是一種網頁設計[1]技術,可以使網站在不同的裝置,像是電腦、手機、平板等,在瀏覽時能夠對應不同解析度,自動調整成適合的排版呈現,讓使用者獲得良好的瀏覽體驗。 RWD響應式網站和一般手機版網站有何不同?RWD響應式網站只需製作一次,...
根據 Google 統計數字表示,有超過 60% 的使用者使用手機瀏覽網頁,而每一種行動裝置各有不同的螢幕解析度。一個好的網站,得讓使用者在瀏覽網站時有最好的體驗,在各種裝置上都能清楚閱讀網頁內容。因此,RWD 響應式網站誕生。
響應式網頁設計,英文為 「Responsive Web Design」,通常縮寫為 RWD design。是一種網頁設計[1]技術,可以使網站在不同的裝置,像是電腦、手機、平板等,在瀏覽時能夠對應不同解析度,自動調整成適合的排版呈現,讓使用者獲得良好的瀏覽體驗。
RWD 響應式網站和一般手機版網站有何不同?
RWD 響應式網站只需製作一次,而一般手機版網站則需製作電腦版和手機版兩個網站。這代表一般手機版網站網頁製作需要花費更多成本,且網站若需更新也得更新兩次。RWD 網頁不需另外製作網頁,網站維護更省時,因此被廣泛使用。
RWD 設計範例
延伸閱讀:
RWD 設計原則-RWD 尺寸設定與切版
RWD 響應式網站原理即使用 CSS3 Media queries[2],代表網頁會先「詢問 (query) 」「媒體 (Media) 」屬性,進而根據某些特定屬性,像是尺寸、顯示品質等,定義網頁樣式。
在 .css 檔案中,使用「@media」語法標籤,後面加上對於螢幕的尺寸設定:
@media screen and (max-device-width: 400px){}
即是在螢幕寬度小於 400 像素時,套用此CSS。
RWD網頁製作-響應式網頁軟體
要設計 RWD 網頁,也可利用 Wordpress 等響應式網頁架站軟體直接設計,省去編輯程式碼的步驟。
Wordpress[3]Wordpress 是全球最廣泛被使用的架站平台,Wordpress 提供數百種免費擴充軟體,網頁設計自由度高。在 Wordpress 上架設網頁,可選擇不同的網頁佈景主題,幾乎所有佈景主題都支援響應式網頁,可再利用網頁編輯器分別編輯桌機與行動裝置版網頁的排版。
Wix[4]Wix...