当屏幕尺寸改变时改变元素答案

【问题标题】：changing an element when screen dimensions change当屏幕尺寸改变时改变元素
【发布时间】：2014-04-20 10:04:10
【问题描述】：

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

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

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

任何建议都会很棒。

谢谢。

【问题讨论】：

【解决方案1】：

将此包含在<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)

对于具有screen 的设备和具有max-width 的960px 的窗口应用该样式。这几乎与上述相同，除了您指定 screen 而不是 other media types 最常见的另一个是 print。

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

这是直接来自 W3C 的 quote 来解释这一点。

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

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

【讨论】：