Question

这是我对响应式网站设计的第一次尝试，并且遇到了一个奇怪的问题，即在Firefox 32 for Windows 7中的特定窗口宽度处丢失了媒体查询（到目前为止）。

当缓慢调整窗口大小时，它可能会导致断点处（大部分）无格式内容的闪烁。如果我小心地调整窗口大小，我可以达到断点之间的宽度。我最终看到了默认样式，因为媒体查询在两种情况下都会丢失。

例如，max-width 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;
}

如果需要修改，有关如何解决此问题或改进我的代码的任何建议吗？

Answer 1

这不是一个错误，它是一个功能。

Firefox在子像素级别上解释媒体值，例如：不是整数值而是浮点值。因此，X的 min-width 与X + 1的 max-width 之间存在1px的间隙，其中不适用定义。似乎违反直觉的是，可以在子像素级别上设置视口的大小，但考虑放大效果，其中像素值乘以给定因子。

由于媒体选择器未提供任何“＆gt;”或“＆lt;”运算符，您必须将max-width设置为X + 0.01而不是X + 1。虽然这种解决方法留下了0.01像素的间隙，但可以合理地假设它永远不会出现。

当然你也可以使用X + 0.000001 ...如果这让你安心; - ）

当窗口大小调整为最大宽度减去滚动条宽度时，Firefox中的媒体查询丢失

1 个答案: