我如何让Firefox使用媒体查询？

更改link为：

<link rel="stylesheet" href="styleslaptop.css"/>

然后打开，styleslaptop.css并在文件底部添加以下内容：

的CSS

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
  PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}

我从本文获得了媒体查询：标准设备的媒体查询确定断点的最佳方法是通过设计而不是通过设备设计，但是如果您的站点不是那么复杂，则cookie切割器就足够了。

更新

通过检查您的2个样式表，我相信我知道为什么笔记本电脑CSS在Firefox中不起作用。在两个样式表的末尾，您都使用了一个很少使用的规则：@-moz-document url-prefix() {}该规则使用定位特定页面prefix(http://example.com/path/)。@document规则的解释在这里。这有两个小问题和一个大问题：

1. 该@document规则仅受Firefox支持。
2. 如果您确实要使用此无用规则，则应在括号ex中放入一个url。 @moz-document url-prefix(http://example.com/path)

因此，现在在桌面CSS上，如果您使用Firefox ，则该规则集中的属性和值将应用于所有页面。现在到了主要问题。

在笔记本电脑CSS上，您缺少@document规则集的右括号。这就解释了为什么您会在Firefox中看到很大的不同，以及为什么我给您的媒体查询无法正常工作。要解决此问题，只需转到笔记本CSS的最底部，然后放置一个即可}。现在，您应该以预期的方式查看Firefox，但是请记住，在dektop CSS中还有一些额外的规则：

    #testimonialscontent h2 {
           padding-top:0.25%;
           padding-right:0;
           font-size:1em;
     }  

     body {
           background-color:white;
     }

进一步建议

花些时间学习深奥的东西是件好事，但要注意其他开发人员也是如何做事情的。有许多无用的属性和规则，它们的目的太具体或兼容性太窄。它们中的大多数（但不是全部）都有供应商前缀-moz，-webkit等。这些在大多数情况下是实验性的，部分受支持的和/或以某种方式受到限制，因此请记住Caveat emptor。因此，当您要使用不常用的东西或带有供应商前缀的东西时，请访问：http : //caniuse.com/，搜索将产生信息，例如哪些浏览器支持属性，元素等。

在样式表上，应该尝试使用一种具有所有自定义样式的样式表。您应该将台式机CSS用作核心规则，然后将笔记本电脑拥有的所有新规则（而不是所有规则）放在核心规则（台式机CSS）的底部，然后将它们放在正如我最初解释的那样，媒体查询。之所以需要减少外部文件（不仅是.css也是.js）的数量是因为它们会产生额外的HTTP请求，请参见：导致网站变慢的七个错误。

先生，祝你好运。如果我有所帮助，请不要忘记单击该绿色的对勾，如果我确实有帮助，请也单击该向上箭头。;）