JQuery Mobile、Bootstrap 和 CSS3 媒体查询，选择啥组合

Posted 2023-02-25

【中文标题】JQuery Mobile、Bootstrap 和 CSS3 媒体查询，选择啥组合

【英文标题】：JQuery Mobile, Bootstrap and CSS3 Media Queries, what combination to chooseJQuery Mobile、Bootstrap 和 CSS3 媒体查询，选择什么组合

【发布时间】：2012-05-25 18:51:50

【问题描述】：

JQuery Mobile、Bootstrap 和 CSS3 媒体查询

使用什么组合

要拥有一个 UI 框架，我们都应该使用 Bootstrap 之类的东西。 要为 Mobile 开发，我需要一些可以轻松在一个 html 文件中切换页面的东西，就像 JQuery Mobile (JQM) 一样。 要针对不同的屏幕宽度（iPhone、iPad 等）进行开发，我需要根据响应式网页设计规则进行开发。

根据http://jquerymobile.com/test/docs/api/mediahelpers.html，JQM 不支持媒体查询，其中表示不推荐使用辅助类。它将您指向媒体查询，除非您使用 Bootstrap 或 Skeleton，否则没有好的示例

在寻找将 Bootstrap 与 JQM 结合的信息时，除了在 JQM 中创建 Bootstrap 主题的 Andy Matthews 之外，没有很好的例子。 http://www.andymatthews.net/read/2012/02/13/New-jQuery-Mobile-theme:-Twitter-Bootstrap

那么，开发具有响应式网页设计的 WebApp 的常见做法是什么？ 人们是否忽略了 JQM（并自己做 page-in-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 一起很好地发挥作用。并且您拥有它的方式应该在大多数情况下都可以工作，但可能会覆盖一两个类。如果您确实选择了这条路线，请务必制作一个自定义构建的引导程序，其中仅包含您打算使用的引导程序部分。尽可能多地消除开销。

然而，使用 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/

【讨论】：

感谢@codaniel 的回答。看起来 Bootstrap 为移动 WebApp 开发提供了太多开销。 JQM 和 CSS3 媒体查询的组合足以创建 WebApp。我现在就走那条路。