響應式網站設計(RWD)


首頁 > 最新消息 > 響應式網站設計(RWD) >

Scroll
2018-04-22

關於 RWD (Reponsive Web Design 自我調整響應式網頁設

常說 
One approach isn't necessarily better than the other. You have to pick the approach that works best with your personality (or your team's personality)
一個方法"不一定"比另一個方法好。要根據需要的情況來選擇。
 
這事在 RWD 裹,微軟有什麽方案?
 
目前我們在使用的 Bootstrap 就是 RWD 的其中一個解決方法
他是由 Twitter 公司的工程師,根據多年經驗總結出來的。
Bootstrap 的基本是什麽?Bootstrap = HTML + CSS + JS
透過將畫面分成 12 個 Columns ,再指定每個東西占多少 Columns 來達到自我調整
(手機比較窄、平板其次,電腦畫面比較寬)
Bootstrap 當然也有一些美化的功能,不在這裹討論
 
微軟在 MVC 裹,也使用了 Bootstrap
而微軟另外,又提供了,叫 Display Mode 的方法
這是另一種很不錯的方法,如下
 
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("IE9")
{
    ContextCondition = (context => 
        context.Request.UserAgent.Contains("MSIE 9"))    
});
 
這表示要加入一種顯示模式,名稱叫 IE9
而什麽情況下,符合這種顯示模式?
就是當網頁請求時,如果發現有 header 有 UserAgent 等於 MSIE 9 時,就符合這種情況
這時,我們的網頁原本要顯示為 Index.cshtml 的,會改顯示 Index.IE9.cshtml
 
內建已經有手機的顯示模式
所以,比如我們新增 Index.Mobile.cshtml 
則手機瀏覽時,就會顯示這個 View
 
總結就是微軟提供了兩種方式都可以用
但,想一下,當我們增加一個 Index.Mobile.cshtml 時
也就表示,要維護時 Index.cshtml 以及 Index.Mobile.cshtml 必須要同時維護
這又是兩面刀~~~