JQuery Mobile和CSS3媒体查询

时间:2013-08-03 19:32:47

标签: css3 jquery-mobile media-queries

我正在编写一个移动友好的网页,我是JQuery Mobile。但是,在我的CSS中,我使用了许多媒体查询。除非我想使用AJAX(JQueryMobile的'data-ajax'属性)加载页面,否则这一切都很好。如果我这样做,则似乎不会考虑媒体查询。只有当我刷新媒体查询似乎启动的页面时才会启动。

有没有人在这方面有过任何经验,或者他们能否解释我的情况?

我在azure上发布了一个样本来演示。它包含一个登录表单(无需用户名或密码 - 只需单击“登录”)。在目标(home.html)上,有一个div应该使用宽度大于767px的媒体查询隐藏。然而,当我调整窗口大小时,它并没有隐藏。只有在我重新加载页面并调整大小时才会发生这种情况。

见这里:http://testjquerymob.azurewebsites.net/index.html

提前致谢。

Ť

1 个答案:

答案 0 :(得分:0)

啊哈!

在我这边非常愚蠢的错误。正如我在上面回应 hungerpain 时提到的,我在<style>标签内包含了媒体查询的CSS。在从包含的样式表中移动它们之后,我认为它会对问题进行排序,从而达到了这一点。事实证明它没有。但是,我发现之后的是它在加载页面(我正在加载目标URL的页面)内,我应该引用包含的样式表,或者至少在{{1中添加媒体查询标签。

所以,总结一下 -

  1. 我加载了index.html
  2. 我想将 home.html 加载到其中,并根据视口大小隐藏 home.html 中的DIV。
  3. 我不应该像我一样在 home.html 中包含媒体查询,而应该在父页面中包含媒体查询/样式表 - index.html as进入该页面的 home.html 的html内容将被加载
  4. 谢谢你们,

    Ť