定義-響應式網頁設計(RWD)是什麼意思?

首頁 > 網頁設計部落格 > 定義-響應式網頁設計(RWD)是什麼意思?

響應式網頁設計(RWD)是開發網頁設計中的一種方法,意旨創造出夠提供提高效率且具有吸引力的視覺的網站體驗,方便在不改變網站結構狀態下瀏覽您的網站。

這項技術可擴展至任何用於查看網站的設備或瀏覽器,這也意味著會隨著顯示螢幕的大小自動調整網站的外觀和佈局。

RWD透過瀏覽器本身的尺寸,運用CSS的技術將網頁設計佈局調整為適合用戶觀看尺寸。

響應式設計的好處

使用響應式的代碼構建網站有很多好處。首先,一個響應式網站就可以為多種顯示螢幕提供靈活自動調整,在所有移動設備上顯示效果極佳,圖像尺寸和字體將更加利於行動裝置上,所設計的鏈接和按鈕將更易觸發點擊。

同時也利於SEO(Search Engine Optimization)-搜尋引擎最佳化,響應網頁可以減少許多重覆的內容、保有網站本身的連結來做到最佳化。

響應式設計功能

  • 網站佈局隨著顯示解析度的變化而改變
  • 延伸圖像以填滿瀏覽器大小
  • 可同時檢測多個瀏覽器視窗分辨率
  • 提供CSS代碼輕鬆調整
  • 創建適應於不同設備的網站
  • 所有設備電腦手機平板只需要一組網頁
  • 在移動裝置上更容易修改字體,寬度,高度或隱藏元素
  • 可以創建隨著裝置改變的顯示大小 透過響應式網頁設計讓視覺最到最佳化。
RWD

較RWD與傳統網頁設計

RWD響應式網頁設計傳統網頁設計
根據螢幕視窗來改變網頁排版的方式固定比例縮放(手機平板不容瀏覽)
開發成本較低(只需開發一次)開發成本較高(需針對不同版本進行開發)
固定連結非固定連結(不利於分享)
增加搜尋引擎排名無加分效果
容易管理(一次性修改連動全部)分開管理(網頁板與手機板分別後台管理)

viewport設置

使用Viewport制定行動裝置顯示尺寸

響應式網頁設計中,我們將Viewport配置為Google推薦的值

<meta name = viewport content =“width = device-width,initial-scale = 1”>

設定好Viewport語法後,螢幕解析度將呈現最佳閱讀狀態,因應各種設備自動調整文字大小

連Google也推薦使用響應式網頁設計(RWD)

Google 目前是全世界最大搜尋引擎,而他在 2015.08.17 說到Google 在自己的網站上說明了 “Google recommends web masters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.”

所以網站該如何做,跟著Google大神就對了!

By |2018-08-21T16:52:07+00:00五月 14th, 2018|