帳號
密碼

忘記密碼 | 註冊帳號 | 記住我


24人上線 (1人在瀏覽留言討論)

會員: 0
訪客: 24

更多...

桃園市雲端公益寺廟資訊網論壇
   網站留言
     自適應網頁設計 (Responsive Web Design)
註冊發表

樹狀顯示 | 新的在前 前一主題 | 後一主題 | 底部
作者 內容
hongshan
發表於: 2017年12月26日 06:26
高級會員
加入: 2010年11月02日
來自: 桃園市桃園區三元街407巷50號
文章: 131
自適應網頁設計 (Responsive Web Design)
我們先來看看幾個網站
請瀏覽以下幾個網站,並同時縮放視窗寬度:

https://tw.yahoo.com/
https://www.google.com.tw/
https://orangeapple.co
https://twitter.com/
http://www.apple.com/
有哪些在縮放了以後,還能維持不錯的閱讀性:不用左右滑動,只要上下滑動即可閱讀完所有的內容?

自適應網頁設計 (Responsive Web Design)
這種會隨著螢幕大小而變化的網頁設計方法,就叫做『自適應網頁設計 (Responsive Web Design)』,而只要我們使用了 Bootstrap 的格線系統,其實就預設幫我們實現了這個功能。

RWD 的原理
RWD的概念就是:當螢幕夠寬時,可以在橫向顯示多一點的欄位 (Columns),而當螢幕不夠寬時,則用『一欄式』的頁面佈局來垂直顯示所有的資訊區塊



現在,來縮放一下你的瀏覽器,看看你的網頁有沒有跟著變化吧!
樹狀顯示 | 新的在前 前一主題 | 後一主題 |

註冊發表
 
Copyright 2013 by Taoyuan County Government. All Rights Reserved. THEMES BY CADCH. POWERED BY XOOPS.網頁設計