这是我在自适应网站设计的第一次尝试,并已运行到一个奇怪的问题,即媒体查询在火狐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;
}
如何解决这个问题或改善我的代码,如果它需要任何固定有什么建议?