iT邦幫忙

3

[鼠年全馬鐵人挑戰] Week06 - 新手學習筆記:淺談 RWD (響應式網頁設計)

  • 分享至 

  • xImage
  •  

Hi~又見面啦 這週大家過的好嗎?

最近開始學習了 RWD 響應式網頁設計,發現可以運用的好多也不少細節呢~
想好好把學到的寫成筆記增加自已的印象 :)
所以最近幾篇都會來跟大家分享我的 RWD 小筆記唷~
如有觀念不足或是錯誤的地方,歡迎大力指正XDD/images/emoticon/emoticon16.gif

什麼是 RWD 響應式網頁設計

在智慧型手機出現之前,我們所知網頁都是電腦版的,隨著時代的進步智慧型的手機普及幾乎人手一支
在十年前(或許更久?),當你想要上網查詢觀看你所想要的資訊時,都會把你的桌上型電腦或者是筆記型電腦打開,連上網路開啟網頁查詢你想要的內容。
十年後的現在,用電腦看網頁的人數變的比較少,手機一開就能 google 你想要資訊網頁,但桌上型跟手機版的網頁呈現方式還有尺寸大小都不一樣,如果還是用相同的寫網頁的模式,那在手機使用者的體驗會很不好,例如看一個資訊要想辦法放大縮小,或是要看個比較長的文字資訊文字跑出去了,在觀看上面是很不方便的。
所以,為了符合現今潮流及大大小小不同手機平版的尺寸,響應式網頁設計有存在之必要。

像水一樣的 RWD 響應式網頁

RWD 響應式網頁就好像是水一樣,在不同的杯子容器都能自適應,讓網頁在各種裝置的不同尺寸或解析度會根據使用者的裝置,設計出符合版面大小的樣式來顯示網頁的內容。RWD的應用可以讓各種不同的裝置,桌上型電腦、筆電、手機、平版等都可以瀏覽同一個網站,就不會有那種需要使用者自已放大縮小看頁面字還會跑出去的困擾了。

優點

  • 跨越各種裝置

    可以用在不同的手機、平版等裝置,自適應該網頁的設計,在閱讀方更加方便流暢可讓使用者更吸引目光。

  • 降低開發維護網站的成本

    在網頁開發時,不用各種不同裝置就開發一次不用分成好幾個檔案,進而節省開發維護時間及成本。

  • 提升 SEO 搜尋排名

    使用 RWD 響應式網頁可以提升使用者的體驗,也會有越多人看這個網頁,當網頁瀏覽人數越高時相對的網頁排名也 會比較前面了。

原來 RWD 響應式網頁的優點跟功能真不少,原本以為只是單純變大變小(大誤XDD/images/emoticon/emoticon01.gif
在學習及整理筆記的時候真的不少呢~接下來就是進入程式語法的章節了,希望自已能學習的越來越順利:)


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
iT邦新手 5 級 ‧ 2020-03-19 12:21:41

建議一開始先用CSS/JS 實作 RWD
熟悉後再去接觸 bootstrap 那些東西

a841722 iT邦新手 5 級 ‧ 2020-03-19 22:16:17 檢舉

謝謝你的建議:)

我要留言

立即登入留言