android - 当屏幕尺寸改变时改变元素

Question

我正在使用语义框架。我有两个导航菜单，一个用于桌面，另一个用于移动。我正在使用这个 CSS：

#mob {
    display: none;
}
@media (max-width: 960px) {
    #desktop {
        display: none;
    }
    #mob {
        display: inline-block;
    }

当我调整窗口大小时，它适用于谷歌浏览器，但它不适用于我测试过的两个 android 设备。我还使用带有 browserstack 的 ios7 对其进行了测试，但没有运气。

其余代码在这里：http: //jsfiddle.net/Cu3aR/

任何建议都会很棒。

谢谢。

score 0 · Accepted Answer

包括这个<head></head>

  <meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->

改变你的@media风格

@media only screen (max-width: 960px) {
    #desktop {
        display: none;
    }
    #mob {
        display: inline-block;
    }
}

现在我试着解释一下.. :)

@media (max-width:960px)

对于您想要应用这些样式max-width的窗口。960px在大多数情况下，在那个尺寸下，你会谈论比桌面屏幕更小的任何东西。

@media screen and (max-width:960px)

对于带有 ascreen和带有max-widthof的窗口的设备，960px应用该样式。这几乎与上述相同，只是您指定screen了与其他媒体类型相反的最常见的其他媒体类型print。

@media only screen and (max-width:960px)

关键字 '<code>only' 也可用于隐藏旧用户代理的样式表。用户代理必须处理以“only”开头的媒体查询，就好像“only”关键字不存在一样。

由于没有像“ only”这样的媒体类型，旧浏览器应该忽略样式表。

1 回答 1