Question

我是网页设计的新手，并试图使我的网站笔记本电脑友好。随着窗口大小的变化，我决定使用媒体查询来提取不同的样式表。这适用于Chrome和IE浏览器，但Firefox使用我为笔记本电脑编写的样式表，无论我是在笔记本电脑还是1080p显示器上提取它。

这是我目前正在使用的媒体查询。

    <link rel="stylesheet" media="screen and (min-width:1200px) and (max-width:1600px)" href="styleslaptop.css" />

我已经检查了所有扩展程序，但没有一个能够有所作为。

非常感谢任何帮助。

Answer 1

将您的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
}

我从这篇文章中得到了媒体查询：Media Queries for Standard Devices 确定断点的最佳方法是设计，而不是设备，但如果您的网站不是那么复杂，那么千篇一律就足够了。

<强>更新

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

只有Firefox支持@document规则。
如果你真的想要使用这个无用的规则，那么你应该在括号ex中加上一个url。 @moz-document url-prefix(http://example.com/path)

现在，在桌面CSS上，该规则集中的属性和值适用于使用Firefox的所有页面 IF 。现在谈谈主要问题。

在笔记本电脑CSS上，您缺少@document规则集的结束括号。这就解释了为什么你看到Firefox的巨大差异以及为什么我给你的媒体查询都没有用。要解决此问题，只需转到笔记本电脑CSS的最底部并放置}即可。您现在应该以您期望的方式看待Firefox，但请记住dektop CSS中有一些额外的规则：

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

     body {
           background-color:white;
     }

进一步的建议

您花时间学习深奥的东西很好，但要注意其他开发人员的工作方式。存在大量无用的属性和规则，这些属性和规则在目的上过于具体或者兼容性不足。大多数但不是全部都有 vendor prefixes -moz，-webkit等。这些在很大程度上是实验性的，部分支持的，和/或以某种方式限制的，所以请记住警告经纪人。因此，当您想要使用经常使用的内容或带有供应商前缀的内容时，请转到： http://caniuse.com/ ，搜索将产生诸如哪些浏览器支持的信息财产，要素等。

在样式表上，应该尝试使用一个包含所有自定义样式的样式表。您应该使用桌面CSS作为核心规则，然后放置笔记本电脑的所有新规则（并非所有规则）并将它们放在底部核心规则（桌面CSS），然后把它们放在我最初解释的媒体查询中。您需要最小化外部文件数量（不仅仅是.css而且还包括.js）的原因是因为它们会产生额外的HTTP请求，请参阅：Seven Mistakes that Make Websites Slow。

Answer 2

将您的媒体查询放入css文件中..

像这样的链接 <link rel="stylesheet" href="styleslaptop.css" />

在你的CSS中包装

之间的所有东西

@media screen and (min-width:1200px) and (max-width:1600px) { /* your css here */ }

如何让firefox使用媒体查询？

2 个答案: