媒体查询可以与 jquery mobile 一起使用吗？

Question

我只是在阅读如何使用响应式布局开发网站。我想我已经掌握了这个想法，现在可以根据浏览器尺寸对内容进行不同的样式设置。

不过，我也研究过 Jquery mobile，我喜欢他们使用的 UI。

我的问题是，是否可以将两者结合起来？ IE。我能否拥有一个在 pc/mac 上查看时可以正常呈现的网页，但是当浏览器宽度下降到 320 像素以下（例如）时，我可以切换到使用 Jquery 移动版吗？

我认为这可以通过在我的页面中包含 jquery 移动脚本以及“数据角色”属性来实现，但如果浏览器具有特定大小，则仅包含 jquery 移动样式表，即：

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

这有可能吗？我不知道我是否正在尝试将 Jquery mobile 用于它不适合处理的事情？我应该有一个完全独立的网站，即。 http://m.mysite.com 有独立的移动内容？或者是否有可能拥有一个自适应网站？

谢谢！

Answer 1

是的 jQM 支持媒体查询：

• http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html（甲级）
• http://jquerymobile.com/test/docs/api/mediahelpers.html
• http://jquerymobile.com/gbs/

Answer 2

这是一个非常有趣的问题...

答案取决于因素，例如 2 种设计在 320 像素以下和高于 320 像素之间有何不同。

如果差异很大，拥有一个单独的移动网站是个好主意..

但如果差异很小，您可以使用 CSS 媒体查询来处理。

您可以将 CSS 媒体查询与响应式网页设计相结合来处理不同尺寸的屏幕..

Answer 3

问题并没有真正得到回答。

您不能仅在移动站点上使用 JQM，而不能在仅使用 CSS 媒体查询的桌面版本上使用 JQM。你必须做完全独立的网站并做一个重定向。

一个可能更好的选择是在移动版和桌面版上都使用 JQM，在这种情况下 CSS 媒体查询可以完美运行。这样做的问题是它限制了您如何使用 JQM 以及您如何设计您的站点。你真的不能把现有的现代桌面设计变成 JQM。

JQM 演示本身使用媒体查询将其在台式机和平板电脑大小的浏览器上变成两列布局，在手机上变成单列布局。这样做的问题：整个页面就像一个页面，这意味着诸如侧边菜单之类的 div 转换并重新加载新页面（这就是他们只使用淡入淡出转换的原因）。不涉及整个页面的内容的正常 AJAX 加载需要要么涉及整个页面，要么在正常的 JQM 处理方式之外进行自定义。在某些情况下可能不会太难，但它会增加 JS 代码并使某些应用程序更加复杂。对于比 JQM 演示更复杂的设计，我还可以看到 CSS 很快就会失控。