![]() ![]() ![]() | 註冊發表 |
樹狀顯示 | 新的在前 | 前一主題 | 後一主題 | 底部 |
作者 | 內容 |
---|---|
hongshan | 發表於: 2017年12月26日 14:26 |
高級會員 ![]() ![]() 加入: 2010年11月02日 來自: 桃園市桃園區三元街407巷50號 文章: 133 |
自適應網頁設計 (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),而當螢幕不夠寬時,則用『一欄式』的頁面佈局來垂直顯示所有的資訊區塊 現在,來縮放一下你的瀏覽器,看看你的網頁有沒有跟著變化吧! |
樹狀顯示 | 新的在前 | 前一主題 | 後一主題 | |
註冊發表 | |