css - 可见性规则在媒体查询中不起作用

Question

我的 _header.html.erb 中有以下代码

      <a class="navbar-brand" href="#"> Brand </a>

我希望它在移动设备上显示，但不希望在大型显示器上显示...

我有:

.navbar-brand {
     visibility:hidden;
}

在我的通用 CSS 中。

我使用媒体查询反击上面的代码，但是没有成功。

@media screen and (device-aspect-ratio: 40/71) {
    .navbar-brand{
         visibility:visible;
    }
}

结果是，品牌 无处可寻。

以上代码旨在针对 iPhone5。难不成别的设备a-r一样，显示不出来？或者上面的@media 是实现我想要实现的目标的合适方法。

Answer 1

如果您同意最小化浏览器宽度并看到相同结果的人，我会建议使用宽度进行媒体查询以定位手机

.navbar-brand {
    display: block;
}

@media only screen 
and (max-width : 321px) {
.navbar-brand {
    display: none;
}

是的，其他设备可能具有相同的比率。根据我的经验，指定这种方式很麻烦，我建议采用上述方式。如果您真的想针对特定设备，请对特定设备的用户代理字符串进行快速脚本检查，并在常规 css 下方加载该设备的特殊 css。