这是我第一次尝试响应式网站设计，并且遇到了一个奇怪的问题，即在适用于Windows 7的Firefox 32的特定窗口宽度下，媒体查询丢失（到目前为止）。
缓慢调整窗口大小时，可能会导致（大部分）无样式内容在断点处闪烁。如果我仔细调整窗口大小，我可以达到断点之间的宽度。我最终看到默认样式，因为媒体查询在这两种情况下都丢失了。
例如，最大宽度 768px 是一个断点，当窗口大小调整为 767px 时，它应该加载新的媒体查询。在这种情况下，下一个向下的布局为 600px 宽。
但是，在 Windows 7 的 Firefox 32 中，如果我能够使浏览器窗口宽为 767.4px，则不会加载新媒体查询。
当我检查代码时，计算的 HTML 以十进制值显示宽度。这与我的其他浏览器不同，这些浏览器似乎都四舍五入到整数。
我尝试更改使用 ems、rems 或 px 值的样式和 HTML 媒体查询中的值。某些更改导致其他浏览器在断点之间出现类似的问题。我发现使用像素宽度可以获得最佳结果，但不能解决FF32问题。
这是 PHP 页面代码：
<!doctype html>
<html lang="en">
<head>
<title>This is the title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<meta name="description" content="This is the description.">
<link rel="shortcut icon" href="favicon.ico">
<link rel="image_src" href="http://www.website.ca/image.gif">
<link rel="stylesheet" href="styles/styles-base.css">
<link rel="stylesheet" href="styles/styles-320.css" media="only screen and (min-width: 0px) and (max-width: 479px)">
<link rel="stylesheet" href="styles/styles-480.css" media="only screen and (min-width: 480px) and (max-width: 599px)">
<link rel="stylesheet" href="styles/styles-600.css" media="only screen and (min-width: 600px) and (max-width: 767px)">
<link rel="stylesheet" href="styles/styles-768.css" media="only screen and (min-width: 768px) and (max-width: 959px)">
<link rel="stylesheet" href="styles/styles-960.css" media="only screen and (min-width: 960px) and (max-width: 1223px)">
<link rel="stylesheet" href="styles/styles-1224.css" media="only screen and (min-width: 1224px)">
<link rel="stylesheet" href="webfonts/ss-standard.css">
<?php include("includes/head_typekit.php")?>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="scripts/mobilenav.js"></script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body id="page-overview">
<div id="wrapper">
以下是 styles-base.css 中的相关默认样式：
body {
background-color: #eaf6f8;
font-family: "ff-meta-web-pro", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 100%;
}
/* . . . */
#wrapper {
background-color: #fff;
margin: 0 auto;
overflow: hidden;
position: relative;
}
下面是其中一个样式表的示例，它们都遵循此方法：
#wrapper {
width: 1224px;
}
关于如何解决此问题或改进我的代码（如果需要任何修复）的任何建议？
这不是错误，而是一个功能。
Firefox 在子像素级别上解释媒体值，例如不是整数值，而是浮点值。因此，在 X 的最小宽度和 X+1 的最大宽度之间存在 1px 的间隙，其中没有应用任何定义。可以在子像素级别设置视口的大小似乎违反直觉，但请考虑放大倍率的效果，其中像素值乘以给定因子。
由于媒体选择器不提供任何">"或"<"运算符，因此必须将最大宽度设置为 X+0.01 而不是 X+1。尽管此解决方法留下了 0.01 像素的间隙，但可以合理地假设它永远不会出现。
当然，您也可以使用X + 0.000001...如果这让您高枕无忧;-）
正如各种资源（如OP）所表明的那样，由于亚像素渲染，Firefox 可能不会应用具有 1px 间隙的媒体查询。
此外，由于舍入，使用小数位（如 767.9px ）可能会导致意外或其他烦人的结果。
但是，在第 4 级中有一些语法改进，我们可以使用媒体查询范围语法（请参阅规范）：
@media (min-width: 30rem) and (max-width: 50rem) { /*…*/ }
/* ↑ is equivalent in level 4 to ↓ */
@media (30rem <= width <= 50rem ) { /*…*/ }
。在OP的用例中：
@media (480px <= width < 600px) { /* use 480.css */ }
@media (600px <= width < 768px) { /* use 600.css */ }
@media (768px <= width < 960px) { /* use 768.css */ }
除了化解舍入问题之外，明显的优势是代码更少，同时使用普通的数学比较运算符 - 并且不再有n−1。