Jquery Mobile 还是响应式设计？答案

【问题标题】：Jquery Mobile or Responsive Design?Jquery Mobile 还是响应式设计？
【发布时间】：2013-09-30 14:38:48
【问题描述】：

我一直在对构建响应式设计进行大量研究。所以我从这里看到了这篇文章：

Is it redundant using jQuery Mobile and a responsive layout /CSS media queries?

这让我开始思考。响应式设计不会取代制作 Jquery Mobile 网站吗？因为响应式设计与 JQ Mobile 所做的相同，但更好，因为您可以更好地控制每个区域。如果我错了，请纠正我，我只是想知道和学习！那么，为什么会有人想要使用 JQuery Mobile 甚至使用带有响应式设计的 JQ Mobile？

【问题讨论】：

我看了答案，还是不明白
选择范围更广：原生应用和/或专用移动（和/或平板电脑）网站和/或 RWD（或 RESS）。这个问题没有单一的答案，编程领域之外有很多限制（顺便说一句，这是这里接受的唯一类型的问题），每个站点/服务需要不同的考虑

标签： html css jquery-mobile mobile responsive-design

【解决方案1】：

如果您也支持桌面屏幕，您可能不会使用 jquery mobile。当涉及到手机和平板电脑时，Jquery mobile 更有用。

另一方面，响应式设计使您能够在您的网站上显示信息并保持其可读性和可用性，而不受屏幕大小的影响。如果您想支持所有屏幕尺寸，请参考 Twitter Bootstrap。

更新

通常情况下，桌面和移动/平板电脑的用户界面不同。因此，根据屏幕大小，您可以决定每个组件（标题、导航栏、侧边栏、正文、页脚）在视口上的布局方式以及设计方式。

例如，与您的桌面版本相比，您的网站将在移动设备上使用单列布局，在平板电脑上使用两列布局。

【讨论】：

因此，如果客户要求您构建桌面和移动/平板电脑网站。您会在 Jquery Mobile 网站上使用响应式网站还是标准桌面网站？
既然您在更新中说了这么多，为什么不将 jquery 替换为响应式设计 (RD)，因为 RD 具有三种平台（台式机、平板电脑和移动设备）？我感到困惑的是，如果您有 RD，JQ 移动网站的真正目的是什么？ JQ Mobile 是否会以不同于智能手机的方式自动调整表格的网站大小？再次感谢您的信息！
jquery mobile 是帮助您更快地构建单页应用程序的框架。它有几个内置功能，您不需要从头开始自己编写它，而且它也响应迅速。这实际上取决于您正在构建什么样的应用程序/网站。

【解决方案2】：

JQuery Mobile 图标可以是您想要的大小，只要它是 14 像素...

虽然这并不完全正确，但您必须非常了解如何在 JQuery Mobile 中使用 CSS 来更改图标的大小，更不用说在媒体查询中更改它们了。

按钮可以有文本和/或图标。如果在桌面 PC 上有带有图标和文本的按钮，而在移动设备上只有一个图标，那就太好了。好吧，这似乎更难，因为按钮的格式是通过将 btn-* 类指定给

<a href="#caddy" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-caddy ui-nodisc-icon ui-alt-icon">Caddy</a>

或：

<a href="#order" class="ui-btn-a ui-corner-all ui-btn ui-btn-icon-right ui-icon-carat-r">Checkout</a>

因此，JQuery Mobile 为您可以使用 CSS 执行的操作添加了更多限制，从而使构建响应式界面变得更加困难。

【讨论】：

【解决方案3】：

如果您的目标是屏幕比桌面更小的移动和手持设备，最好使用 jQuery mobile。

jQuery Mobile 的优势在于它为您提供了一些额外的功能，如页面事件、页面转换、主题等。与编写代码来手动执行所有这些相比，它更容易更简单。

此外，jQuery Mobile 使用更多的流畅布局，这意味着您的页面适合大多数屏幕尺寸。响应式设计可让您根据屏幕尺寸显示/隐藏信息。

【讨论】：

因此，如果客户要求您构建桌面和移动/平板电脑网站。您会在 Jquery Mobile 网站上使用响应式设计还是标准桌面网站？
这取决于需要什么样的网站。对于像那些新闻这样的一般网站，我会选择响应式设计。对于 Twitter 或 Facebook 等复杂的 Web 应用程序，我会为手机和平板电脑构建一个单独的应用程序。我相信响应式设计是未来:)
嗯，这就是我想知道响应式设计 (RD) 是否会取代 Jquery 移动版，因为它具有三个平台（桌面版、平板电脑和移动版布局），当您移动浏览器时它会重新调整大小在移动设备与台式机或平板电脑与台式机等设备上查看或查看它。除了你在 JQ 中获得的花里胡哨的东西，比如过渡等等，它还能做什么或做些什么来击败响应式设计？

【解决方案4】：

如果您正在创建响应式设计 Web 应用程序，我是否建议您遵循 Mobile-first 方法，这基本上意味着您首先为移动设备设计和构建应用程序，而不是在 PC 版本完成后进行？

这是从文章中摘录的一个例子：

 /*Large screen styles first - Avoid*/
.product-img {
  width: 50%;
  float: left;
}
@media screen and (max-width: 40.5em) {
  .product-img {
    width: auto;
    float: none;
  }
}
/* mobile first approach */
@media screen and (min-width: 40.5em) {
  .product-img {
    width: 50%;
    float: left;
  }
}

这样，您可能会觉得 jQuery mobile 在您的开发过程中是多余的。当然，正如其他人所提到的，当您想为手机和平板电脑构建单独的应用程序时，jQuery mobile 会派上用场。

【讨论】：

从移动端构建网站有什么好处？归根结底，似乎无论您采取何种方法，您都必须面对现实，并且知道无论您做什么，都必须构建/布局三个网站（台式机、平板电脑和移动设备）。至少在一天结束时看起来是这样的。
是的，您肯定需要构建 3 个布局版本。但是遵循移动优先，您将编写更简单、更小且更易于维护的代码。有关示例，请参阅我的更新答案。

【解决方案5】：

如果你想建立移动网站，那么你必须使用jQuery mobile，如果你想支持桌面浏览器和移动浏览器，那么你必须使用引导程序或基础框架来制作响应式网站。

【讨论】：