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

时间:2011-12-22 15:45:56

标签: html5 css3 jquery-mobile media-queries

我正在阅读如何开发具有响应式布局的网站。我认为我已经掌握了这个想法,现在可以根据浏览器的尺寸对内容进行不同的设置。

然而,我也研究过Jquery mobile,我喜欢他们使用的UI。

我的问题是,是否有可能将两者结合起来?即。我可以在PC / mac上查看正常渲染的网页,但当浏览器宽度下降到320px(例如)时,我可以切换到使用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移动设备来处理它无法解决的问题?我应该只有一个完全独立的网站,即。 http://m.mysite.com有独立的移动内容吗?或者是否有可能拥有自适应网站?

谢谢!

3 个答案:

答案 0 :(得分:2)

答案 1 :(得分:1)

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

答案取决于两个设计在320px以下以及其他设计之间有多么不同的因素..

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

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

您可以将CSS媒体查询与响应式网页设计结合使用,以处理不同大小的屏幕..

答案 2 :(得分:1)

这个问题并没有得到实际答复。

您不能仅在移动网站上使用JQM,也不能仅使用CSS媒体查询在桌面版本上使用JQM。您必须完全独立的网站并进行重定向。

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

JQM演示本身使用媒体查询将其转换为桌面和平板电脑大小的浏览器上的两列布局,以及电话上的单列布局。这样做的问题:整个页面就像一个页面,意味着divs,如侧面菜单转换和重新加载新页面(这就是为什么他们只使用淡入淡出过渡)。不需要整个页面的内容的正常AJAX加载将需要涉及整个页面,或者在正常的JQM服务方式之外完成自定义。在某些情况下可能不会太难,但它会使JS代码变得更加复杂。我还可以看到CSS很快就会出现比JQM演示更复杂的设计。