2011-12-22 51 views
3

我只是阅读如何开发具有响应式布局的网站。我想我已经理解了这个想法,现在可以根据浏览器尺寸对内容进行不同的设计。媒体查询可以与jQuery移动一起使用吗?

但是我也看过Jquery mobile,我喜欢他们使用的UI。

我的问题是,是否有可能将两者结合?即。我可以在PC/Mac上查看通常呈现的网页,但是当浏览器宽度下降到320px(例如)时,我可以切换到使用Jquery移动版吗?

我想this'd可以通过在我的页面中的jQuery Mobile的脚本,用“数据角色”属性一起,但仅包括jQuery Mobile的样式表,如果浏览器是一个特殊的尺寸,即:

<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?或者有可能有一个适应性网站?

谢谢!

回答

1

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

答案取决于2种设计的不同之处一个低于320像素等上面..

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

但如果差异是最小的,你可以处理,与CSS媒体查询。

您可以将CSS媒体查询采用自适应网页设计来处理不同尺寸的屏幕组合..

+0

那么我有一个单独的网站主要担心的是不得不镜像的内容。尽管我想我们只会创建第二个网站,如果这两个网站非常不同,并且会有不同的内容。 我想在我谈论的情况下,我想要的内容是相同的,我只是想为不同的设备呈现它。在这种情况下,我认为你是对的,媒体查询是要走的路。我只想使用JQuery移动UI! – alimac83 2011-12-23 11:25:16

+0

是的正确...媒体查询应该是针对不同屏幕尺寸的首选方式..需要在这种情况下只保留CSS ...至于另一部分,你可以考虑Sencha touch,Flowplayer,jQTouch除了jQuery移动以及... – testndtv 2011-12-23 16:47:34

1

的问题并没有真正回答,因为它是问。

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

一个可能更好的选择是在移动版和桌面版上使用JQM,在这种情况下CSS媒体查询可以很好地工作。这样做的问题是限制了你如何使用JQM以及如何设计你的网站。您实在无法采用现有的现代桌面设计并将其设计为JQM。

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