0

我们的目标是创建一个同样适用于移动设备的网站。我想这是一个非常通用的要求。

我已经阅读了有关媒体查询的信息，并且也涉足了 Jquery-Mobile。

这是我的理解

  • Jquery Mobile 似乎只适用于移动设备。

  • 媒体查询告诉我设备是什么以及应用什么 CSS - 但并没有给我来自 Jquery-Mobile 的所有好东西。我不想重新发明轮子，做 JM 做过的事。

所以问题是

  • 那么我应该选择哪一个？！
  • 或者有没有办法将它们结合起来？
  • 标准是什么（或者有一个..？）
4

2 回答 2

3

我将保持这一点相当笼统：我的观点是 jQuery 移动和响应式布局是两种完全不同的方法。

除了jQuery 移动响应迅速（在适应屏幕尺寸方面），它带来了巨大的开销。如果你想利用它的特性，你必须调整你的站点结构以匹配 jQuery 约定，所以它基本上是一个“第二个网站”。这不仅仅是添加脚本。此外，样式需要花费更多的精力，因为 jQuery mobile 向页面添加了自己的标记，该标记通常是嵌套的并向元素添加大约 10 个 css 类。话虽如此，如果您使用的是 CMS（例如 Wordpress）并且拥有大量数据驱动的内容（例如博客），那么使用 jQuery 移动版的体验会好很多。有一些插件可以将您的博客变成一个移动页面，只需轻按一下开关......

如果您想保留您的网站外观，并且可以缩放图像，更改字体大小并在这里和那里添加一些填充，我会选择响应式布局. 这肯定也需要一些努力，特别是如果您没有从一开始就实现它（移动优先在这里添加一个流行词），但这将是一种解决移动设备问题的“轻量级”方法。另一件事是响应式布局可以在任何设备上的“运行时”工作，因此如果您缩放浏览器窗口，它会实时适应变化。您可以无缝更改布局以适应不同的屏幕尺寸，比如“手机”、“平板电脑”和“桌面”。使用“流动网格”，您可以将桌面上的三列布局更改为平板电脑上的两列布局和移动设备上的单列布局。为了让 jQuery mobile 仅在移动网站上发挥作用，您必须在用户进入页面时执行一些或多或少的可靠检查，

所以，不要误会我的意思，我在许多“为移动设计”的页面和/或应用程序（通常与 Phonegap 结合使用）上使用了 jQuery mobile，除了有点慢之外，我有点喜欢它。但是，如果您想针对移动设备优化您的网站，响应式布局可能是实现这一目标的最简单方法。

顺便说一句，这基本上是 Jeff Powers 所推荐的，只是多一点“技术人员”；）

于 2013-09-30T18:36:58.207 回答
0

通过使用相对单位，您可以获得最大的收益。对宽度、填充等使用百分比。然后对您希望与字体大小相关的所有字体大小、图标和填充使用 em。然后，您可以使用媒体查询进行小的更改，这些更改需要在从小视口大小到大视口大小的过程中完成。这种方法的好处是网站保持流畅，因此它会自动调整大部分组件以适应视口大小并为您节省一些工作。

如需更深入的了解，请查看这篇文章。 http://alistapart.com/article/fluidgrids

并尝试从移动布局开始工作，否则您会发现自己撤消和重做样式，而不仅仅是添加到已有的样式。

于 2013-09-30T13:49:53.240 回答