关於 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 必须要同时维护
这又是两面刀~~~