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

在CSS中，如果您有两个针对同一元素的规则，则有许多因素可以控制应用哪个元素。对我们来说重要的两个是特异性和 order 。

特异性表示“哪个规则更具体？”。考虑一下这个HTML：

<div>
    <p>Test</p>
</div>

这个CSS：

div p { 
    color: red;
}

p { 
    color: blue;
}

在这种情况下，文字将为红色。 div p是更具体的选择器，因此该规则会覆盖p选择器设置的红色文本。

如果两个规则具有相同的特异性，那么 order 就会发挥作用。后来的规则优先。让我们将上面的CSS更改为以下内容：

div p { 
    color: red;
}

p { 
    color: blue;
} 

div p { 
    color: green;
}

现在我们有两个具有相同特异性的规则。最后一个将适用，因此我们的文本将是绿色的。

那么这与你的问题有什么关系？有两种方式：

媒体查询不会增加特异性。
Rails资产管道可以更改您的CSS订单。

如果您的移动CSS与桌面样式包含在同一文件中，请确保它位于文件的底部，因此您的移动规则会覆盖上述全局规则。如果您将其放在单独的文件中，则必须在app/assets/stylesheets/application.css中列出所有CSS文件，并将mobile.css放在//= require的最底部规则，因此它会在所有其他规则之后加载。如果您允许Rails //= require_tree .包含您的移动样式表，则订单将是未定义的（但几乎总是按字母顺序排列）。这意味着如果您的移动规则试图覆盖文件中某些东西，从字母表的后半部分开始，则不适用。您的非媒体查询规则将覆盖媒体查询的规则。

Answer 2

我意识到这很老了，但是对我来说答案略有不同，尽管我不喜欢我的答案，因为我尽可能避免使用（！important），但目前对我来说唯一有效的方法是在媒体查询中所需的可见性设置之后添加！important。

.menuNavDropdown {
    visibility: visible !important;
}

Answer 3

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

.navbar-brand {
    display: block;
}

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

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

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

3 个答案: