媒体查询在Firefox丢失窗口调整为最大宽度减去滚动条宽度(Media query lost in

2019-10-21 16:07发布

这是我在自适应网站设计的第一次尝试,并已运行到一个奇怪的问题,即媒体查询在火狐32特定窗口宽度的Windows 7(到目前为止反正)丢失。

当慢慢调整窗口大小可以导致(大部分)在断点处无样式内容的闪光。 如果我仔细调整窗口,我可以打的是断点之间的宽度。 我最终看到的默认样式作为媒体查询在这两种情况下丢失。

举例来说,最大宽度768px是一个断点,当窗口大小调整为767px应该加载新的媒体查询。 在这种情况下,下一个倒有一个600像素宽的布局。

在Firefox 32在Windows 7中,但是,新媒体查询是不是,如果我能够让浏览器窗口像767.4px宽加载。

当我检查代码,所计算的HTML示出了具有十进制值的宽度。 这是我不像其他浏览器这一切似乎四舍五入到整数。

我试图在我的样式和HTML媒体查询使用或者EMS,REMS或像素值变化的值。 一些变化已经导致有断点之间类似问题的其他浏览器。 我发现,使用像素宽度得到最好的结果,但不解决问题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">

下面是从款式,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:

这不是一个错误,这是一个功能。

火狐解释上的子像素的水平,例如不为整数值,但作为一个浮点值的介质值。 因此,X的最小宽度和X + 1中的最大宽度 ,其中没有定义适用之间存在1px的的间隙。 这似乎违反直觉,它可以设置在子像素级别的视口的大小,但想想放大的效果,其中像素值乘以给定的因素。

作为媒体选择器不提供任何“>”或“<”运算符,必​​须在最大宽度设定为X + 0.01,而不是X + 1。 虽然此变通办法留下0.01像素的差距,可以合理地假定它永远不会出现。

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



文章来源: Media query lost in Firefox when window resized to max-width minus scrollbar width