时间戳

首页 > 解决方案 > 媒体查询高度在 Mozilla 中不起作用

css - 媒体查询高度在 Mozilla 中不起作用

问题描述

我已经根据屏幕的高度进行了媒体查询，但是该代码似乎在 Firefox 中不起作用。

我试过这个，仍然没有：

@-moz-document url-prefix() {
  @media screen and ( min-height: 1024px){
    .sticky .order .item-list {
        max-height: 50vh !important;
    }
  }
}

**更新我单独使用了@media，但是当我刷新页面时，问题再次出现，媒体查询高度不再起作用。

@media screen and ( min-height: 1024px){
        .sticky .order .item-list {
            max-height: 50vh !important;
        }
      }

标签： cssfirefoxmedia-queriesmozilla

解决方案

Firefox 中的@-moz-documentat 规则隐藏在 about:config 首选项后面，您必须先启用该选项。

警告：它被隐藏是有原因的。显然，这很容易受到攻击。或者用MDN的话来说：

这仅限于在 Nightly 和 Beta 中的 Firefox 59 中的用户和 UA 表单中使用——这是一项旨在减轻潜在 CSS 注入攻击的实验（错误1035091）。

因此，风险自负！

更改 about:config 设置

  1. 在地址栏中输入about :config
  2. 如果这是您第一次这样做，则会出现一条消息，警告您存在危险。单击“我会小心”或“我接受风险”按钮（按钮上的文本因 Mozilla 版本而异）。
  3. 在列表中搜索条目（列表按字母顺序排序），或者在搜索框中键入条目的名称。在这种情况下，您可以只粘贴layout.css.moz-document.content.enabled，然后结果将只有这个条目。
  4. 该值设置为false。通过双击该行将其设置为true ，您就完成了。没有“保存”或“应用”按钮。不过，您可能必须在网页上按 F5。

如果您以前从未使用过 about:config，可以在此处阅读更多信息：
Firefox 的配置编辑器

推荐阅读