Question

我试图编写一些只能在firefox中运行的css，这是在媒体查询中，所以它只能在767px之后运行。以下是我目前所写的内容，但它不起作用。

@media only (min-width: 767px) {
    @-moz-document url-prefix() { 
       .SearchBlock input {
           width:88% !important;
       }
    }
}

没有＆＃34; @media only＆＃34;它可以正常工作部分，但我只希望它在767px后工作。这可能吗？

编辑：将分辨率更改为宽度。

Answer 1

请勿使用min-resolution。使用

min-width ：如果您需要将CSS应用于超过767像素的设备，并使用

max-width ：如果您需要将CSS应用于尺寸小于767px的设备 - 适用于手机

示例：

@media screen and (min-width: 767px) { @-moz-document url-prefix() { .SearchBlock input { width:88% !important; } } }

希望这有帮助！

Answer 2

将min-resolution更改为min-width。

分辨率是针对设备的像素密度。 width指的是您想要的实际宽度。

url-prefix部分需要包含样式规则引用的文档的url，例如

url-prefix("https://example.com/")

@document CSS at-rule限制其中包含的样式规则它基于文档的URL。

https://developer.mozilla.org/en-US/docs/Web/CSS/@document

Answer 3

您没有得到结果，因为您正确使用了最小分辨率。

你可以选择其中一个：

将min-resolution更改为min-width
以分辨率输入分辨率值，例如min-resolution（192dpi）

Px不是分辨率的单位。

Answer 4

试试这个。应该管用！ :)

＆＃13;

 .SearchBlock input {
   display: block;
   width: 30%;
}

@-moz-document url-prefix() {
    @media screen and (min-width: 767px) {
      .SearchBlock input {
           width:88% !important;
       }
    }
 }

＆＃13;

<div class="SearchBlock">
 <input type="text" placeholder="text"/> 
</div>

＆＃13;

Firefox仅在媒体查询中使用CSS

4 个答案: