iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
0

一、何謂RWD
響應式網頁設計(Responsive web design,RWD)是一種網頁設計的概念,由Ethan Marcotte於2010年時提出此,透過CSS3+JQuery網頁技術設計出來的網頁可以在不同的裝置上分別以相對應的模式呈現,對於設計此網站的工程師來說,比較起過去需要針對各種裝置分別設計方便了許多,也更易於之後的維護。

二、RWD的優點
1.移動裝置皆可使用:
目前市面上的電子產品眾多,商家也各自推出屬於自己的螢幕尺寸,導致螢幕尺寸無標準的規格,若沒使用RWD概念來設計網頁,則工程師就必須一一為各式尺寸量身訂做專屬於該螢幕尺寸的網頁格式。
2.開發成本低:
比起過去大家習慣選擇使用APP來做開發,用RWD概念來設計網頁,所花的時間不但比較少也因為不用另外做出行動版而便宜許多。
3.提升曝光率:
APP的曝光率有限,相反的若是以網頁概念來設計,則只要在各大搜尋引擎搜尋相關的關鍵字該網頁就會被看到。

三、圖示

▲螢幕解析度寬度在1024像素以上的畫面,可以呈現網站完整資訊

▲螢幕解析度在700像素以下,原先的設計會變成2個一排

▲如果螢幕解析度在400像素以下,則原本左右編排的版型都會變成直條狀

參考資料:
1.https://zh.wikipedia.org/wiki/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1
2.https://www.ibest.tw/page01.php
3.https://www.newscan.com.tw/rwd/responsive-web-design.php


上一篇
鐵人賽DAY8-Cookies
下一篇
鐵人賽DAY10-JSON
系列文
淺談web30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言