iT邦幫忙

第 12 屆 iThome 鐵人賽

1
Modern Web

好想用網頁設計發大財系列 第 33

Day33:HTML(30) HTML響應式網頁設計

  • 分享至 

  • xImage
  •  

HTML響應式網頁設計
響應式網頁設計(英語:Responsive web design,通常縮寫為RWD),或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。 是一種網頁設計的技術做法,該設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。
對於網站設計師和前端工程師來說,有別於過去需要針對各種裝置進行不同的設計,使用此種設計方式將更易於維護網頁。
採用 RWD 設計的網站使用CSS3 Media queries,即一種對 @media 規則的擴充,以及串流的基於比例的網格和自適應大小的圖像以適應不同大小的裝置:
串流網格概念要求頁面元素使用相對單位如百分比或字型排印學調整大小,而不是絕對的單位如像素或點。
靈活的圖像也以相對單位調整大小(最大到 100%),以防止它們顯示在包含它們的元素外面。
Media queries允許網頁根據存取站點裝置的特點而使用不同 CSS 樣式規則,最常用的是瀏覽器的寬度。
參考資料: 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


上一篇
Day32:php(1)
下一篇
Day34:HTML(31) HTML響應式網頁設計(1)
系列文
好想用網頁設計發大財35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言