我们的目标是创建一个可在移动设备上运行的网站。 我想这是一个非常通用的要求。
我已经阅读了有关媒体查询的信息。我也涉足Jquery-Mobile。
以下是我的理解
Jquery Mobile似乎只针对移动设备。
媒体查询告诉我设备是什么以及应用什么CSS - 但是没有给我Jquery-Mobile的所有好处。我不想重新发明轮子并做JM所做的事情。
所以问题是
答案 0 :(得分：3)
我会保持这个相当笼统：我的观点是jQuery mobile＆amp;响应式布局是两种完全不同的方法。
除了 jQuery mobile 响应（在适应屏幕尺寸方面），它带来了巨大的开销。如果你想利用它的功能，你必须调整你的网站结构以匹配jQuery约定，所以它基本上是一个“第二个网站”。它不只是添加脚本。此外，样式需要花费更多的精力，因为jQuery mobile会将自己的标记添加到页面中，这通常是嵌套的，并且会向元素添加大约10个css类。话虽如此，如果您使用CMS（例如Wordpress）并拥有大量像博客这样的数据驱动内容，那么使用jQuery mobile可以获得更好的体验。
有一些插件可以通过轻触开关将您的博客变成移动页面......
如果您希望保留您的网站外观并且完全可以缩放图像，更改字体大小并在此处添加一些填充，我会选择响应式布局。它肯定会花费一些力气，特别是如果你从一开始就没有实现它（移动首先在这里添加一个流行语），但它将是一种“轻量级”的方法来处理移动设备。另一件事是响应式布局在任何设备上的“运行时”工作，因此如果您缩放浏览器窗口，它将适应实时的变化。你可以无缝地改变你的布局，以适应不同的屏幕尺寸，让我们说“手机”，“平板电脑”和“桌面”。使用“流体网格”，您可以将桌面上的三列布局更改为平板电脑上的双列布局和移动设备上的单列布局。要让jQuery mobile仅在移动网站上启动，您必须在用户进入页面时执行一些或多或少可靠的检查，只是为了重定向他/她。
所以，不要误会我的意思，我在许多“专为移动设备”页面和/或应用程序（通常与Phonegap结合使用）上使用jQuery mobile，我有点喜欢它，除了有点慢。 但是，如果您想针对移动设备优化您的网站，响应式布局可能是实现这一目标的最简单方法。
顺便说一下，这基本上就是Jeff Powers所推荐的，只是更多“Techie”;）
答案 1 :(得分：0)
使用相对单位可以获得最大的收益。使用百分比表示宽度，填充等。然后使用em来表示您想要相对于字体大小的所有字体大小，图标和填充。然后，您可以使用媒体查询进行小的更改，这些更改需要在从小视口大小到大视口大小的过程中完成。这种方法的优点是网站保持流畅，因此它会自动将大部分组件调整为视口大小并为您节省一些工作。
如需深入了解，请查看此帖子。 http://alistapart.com/article/fluidgrids
尝试使用移动设备进行操作，否则你会发现自己撤消和重做样式而不是只添加你已经拥有的内容。