2012-05-25 63 views
1

jQuery Mobile的,引導和CSS3媒體查詢jQuery Mobile的,引導和CSS3媒體查詢,什麼樣的組合選擇

什麼樣的組合使用

要讓大家都應該使用類似的引導程序UI框架。 爲了開發移動應用程序,我需要一些能夠輕鬆切換一個HTML文件中的頁面的東西,比如JQuery Mobile(JQM)。 爲了開發不同的屏幕寬度(iPhone,iPad等),我需要根據響應式網頁設計規則進行開發。

根據http://jquerymobile.com/test/docs/api/mediahelpers.html的說法,JQM不支持媒體查詢,它表示不推薦使用幫助器類。它指向媒體查詢,除非您使用Bootstrap或Skeleton,否則沒有好的示例

當查找將Bootstrap與JQM結合起來的信息時,除了在Matthew JMS創建Bootstrap主題的Andy Matthews外,沒有好的例子。 http://www.andymatthews.net/read/2012/02/13/New-jQuery-Mobile-theme:-Twitter-Bootstrap

那麼,使用響應式網頁設計開發WebApps的常見做法是什麼? 人們是否忽略JQM(並且自己做頁面內html的東西)還是忽略Bootstrap(並且在JQM中通過媒體查詢手動執行響應式網頁設計)?

或者是否有一個整體解決方案覆蓋了WebApp開發的一切? (請不要說PhoneGap的)

要在我的追求添加一些信息爲清楚:我在我的index.html的頭下面幾行:根據

<link rel="stylesheet" href="css/bootstrap.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 

有點吃不消了我的意見?或者這是正確的?希望任何有經驗的WebApp開發人員都能對此有所瞭解。

謝謝,

回答

1

當然,你可能可以得到boostrap和JQM CSS來很好地一起玩。而你擁有它的方式大部分都可以工作,除了一兩個被覆蓋的例外。如果你確實選擇了這個路線,那麼一定要做一個自定義的bootstrap版本,它只包含你打算使用的bootstrap的一部分。消除儘可能多的開銷。

但是,這不是很難使用css3媒體查詢。爲媒體查詢進行快速崩潰課程將爲您的用戶帶寬節省並確保您的網站儘可能快地加載。

下面是使用CSS3媒體查詢一些很好的例子和教程:

http://css-tricks.com/css-media-queries/

http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design

http://webdesignerwall.com/tutorials/css3-media-queries

http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/

+0

感謝@codaniel的答案。看起來Bootstrap爲移動WebApp開發提供了太多的開銷。 JQM和CSS3 Media Queries的組合足以創建WebApp。現在我會走這條路。 – BertC