22 11 月 什麼是[RWD] ：響應式網頁設計？

( 文 / 網頁設計公司 • 2.5D品牌顧問 )

自從行動與觸控裝置風行以來，RWD(Responsive Web Design / 響應式網頁設計)成為各種網路應用新媒體必備的規格，雖然RWD(響應式網頁設計)早是一個通用的網路與電子的媒體重要格式之ㄧ，但是現今為數不少的事業網站尚未採用，以下介紹帶您更加認識RWD(響應式網頁設計)的特性…
2011年由美國程式設計師Ethan Marcotte發表RWD(響應式網頁設計)的觀念，也稱為：回應式網頁設計、對應式網頁設計。在2012年RWD(響應式網頁設計)在美國.net雜誌榮登第2名網頁設計趨勢，顯見這個設計模式的重要性。

RWD(響應式網頁設計)有以下特色:
讓裝置使用者在不同解析度的裝置瀏覽同一網站時，展示較佳的排版觀看狀態（包含文字、圖片與影片的尺吋與編排篇幅），讓使用者不需要縮放、拖移、滾動捲軸，繼續順暢瀏覽不放棄。
以下是google行動裝置友善設計的指導建議：詳細內容

2019年行動裝置的廣泛被使用由BrowserStack所發佈的數據可以得知：

1. 2019年，將近60％的總互聯網瀏覽是發生在手機上。
2. 手機推動了電子商務總收入的50％。
3. 使用智能手機的成年人總數為77％。
4. 94％的上網訪問者根據特定網站的響應度來判斷使用網站傾向。

事業網站為何需要建立RWD(響應式網頁設計)？建立RWD(響應式網頁設計)掌握以下特色與原則：

1.設定Viewport(視窗口)：

設定Viewport(視窗口)可以讓瀏覽器判定並控制視窗長度、寬度與起始視窗比例，需在首頁index.html作程式製定，參考以下語法：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 使用css 設定圖片寬度比例：

需在css作程式製定圖片寬度比例，參考以下語法：

<img src="image.jpg" style="width:100%;">

3. 使用響應式字型大小設定Responsive Text Size：

響應式字型大小設定，參考以下語法：

<h1 style="font-size:10vw">Hello World</h1> 

1ovw代表viewport的10%

4.參考Bootstrap來制定響應式網站框架：

Bootstrap提供多種響應式框架範例供程式設計師研究與發展動態多媒體網站：詳細內容

2.5D 品牌顧問為客戶開發網站皆採響應式網頁規格設計。

RWD網頁設計,響應式網站設計,RWD網站設計,響應式網頁設計