我是新来的网页设计，并试图使我的网站笔记本电脑友好。随着窗口大小的改变，我决定使用媒体查询来调出不同的样式表。这适用于Chrome和IE，但Firefox使用我为笔记本电脑编写的样式表，无论我是否将其放在笔记本电脑或1080p显示器上。如何让Firefox使用媒体查询？
这是我目前使用的媒体查询。
<link rel="stylesheet" media="screen and (min-width:1200px) and (max-width:1600px)" href="styleslaptop.css" />
我已经检查了我的所有扩展，并且他们都没有发挥作用。
任何帮助将不胜感激。
更改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 确定断点的最好方法不是通过设备进行设计，但是如果您的网站不那么复杂，那么Cookie工具就足够了。
UPDATE
在你的2个样式表，我相信我知道为什么笔记本电脑CSS不工作在Firefox的检查。在这两种样式表的结尾处，您都会使用一个很少使用的规则：@-moz-document url-prefix() {}此规则将目标特定为prefix(http://example.com/path/)。 @document规则的说明是here。有两个小问题和一个主要问题：
@document规则只支持Firefox。@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;
}
进一步的建议
这是很好的傻冒服用有时间学习深奥的东西，但要意识到其他开发人员也是如何做的。有一些无用的属性和规则过于专指或缩小兼容性。大多数但不是全部都有vendor prefixes -moz，-webkit等。这些大部分都是实验性的，部分支持的和/或以某种方式受到限制的，所以请记住注意事项。所以，当你想使用的东西你没有看到经常使用的或与供应商前缀的东西，请访问：http://caniuse.com/，搜索将产生信息，如哪些浏览器支持的属性，元素等
在样式表，人们应该尝试使用一个包含所有自定义样式的样式表。你应该用你的桌面CSS为核心的规则，然后将所有的新规则（不是所有的规则）您有笔记本电脑，并把它们在核心规则（桌面CSS）的底部，然后把它们放在媒体查询中，就像我最初解释的那样。您需要尽量减少外部文件（不仅仅是.css，而是.js）的原因是因为它们会产生额外的HTTP请求，请参阅：Seven Mistakes that Make Websites Slow。
祝你好运，先生。如果我帮了忙，不要忘记点击绿色的复选标记，如果真的帮助了你，请点击upvote箭头。 ;）
不幸的是，这并没有奏效。但是，我确实发现了这个问题。我不知道为什么，但我的1080p显示器上的Firefox最大分辨率是1550x840，这意味着它包含在我的1200至1600屏幕宽度范围内以加载我的笔记本样式表。 Firefox的分辨率是否正常？ – user4540080
使用F12并查看“样式编辑器” – zer00ne
您可以发布样式表吗？ – zer00ne
把你的媒体查询你的CSS文件中..
链接这样 <link rel="stylesheet" href="styleslaptop.css" />
而且在你的CSS包裹一切
@media screen and (min-width:1200px) and (max-width:1600px) { /* your css here */ }
之间[对我的作品就好了]（https://jsfiddle.net/0rmz8zho/1/），FF 40.0.3，Win10。 – Siguza