0

完成后，我的网站根据分辨率更改了 css，css 停止在 Firefox 和 IE 中加载。但是，即使在清除缓存并重新加载后，它似乎仍然可以在 chrome 上运行。我已清除所有浏览器中的缓存并尝试多次重新加载。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media='screen and(min-width:721px)' href='css/master.css'/>
    <link rel='stylesheet' type="text/css" media='screen and(max-width:720px)' href='css/mobile.css'/>
    <script type="text/javascript" src="javascript/script.js"></script>
<title>The Resistance</title>
</head>

此外 - 另一个页面上的一些 jquery 在实现多个样式表后停止在所有浏览器中工作。关于如何解决这个问题的任何建议？如果我可以为您提供任何其他信息，请继续询问。网站链接在这里-------------

-谢谢

-- 编辑添加了 w3c 验证器认为 XHTML 1.0 STRICT 上的一切都很好

4

3 回答 3

1

恕我直言，布局 CSS 文件的最佳方式如下：

/* Theme style rules */
#wrapper {
    background-color:#444;
    color:white;
    font-family:Verdana, Arial, Times;
}

/* Static structure rules */
#wrapper {
    overflow:hidden;
    width:50em;
}

/* Responsive structure rules */
@media screen and (max-width:1220px) and (min-width:1151px) {
    #wrapper {
        font-size:15px;
    }
}
@media screen and (max-width:1150px) and (min-width:1081px) {
    #wrapper {
        font-size:14px;
    }
}

基本上你想要做的是将你的代码分成几个部分。主题部分只处理不影响 DOM 中元素流动的事情。静态结构部分设置的规则不会改变，无论屏幕大小。响应部分是您放置媒体查询的地方。为您的媒体查询找到断点的最佳方法是“挤压它直到它中断方法”。意思是关闭浏览器，直到页面看起来像垃圾，然后添加媒体查询并重新排列页面。

顺便说一句，旧的 IE 不支持媒体查询，因此您需要使用 IE 的条件注释来添加一个名为css3-mediaqueries.js 的 polyfill。 它只是一个 JS 文件，可以让媒体查询适用于所有浏览器。

编辑：另外，请点击此链接并使用小书签来查看您当前的屏幕尺寸。它对于响应式设计非常有用。

于 2013-04-23T04:00:13.157 回答
0

根据http://webdesignerwall.com/tutorials/css3-media-queries，内联媒体查询是 CSS3 功能。所以不支持 CSS3 的浏览器会跳过它。

您的选择是：

1) 将所有 CSS 移动到一个文件中，如下所示：

@screen and(min-width:721px) {
  #Your desktop CSS here
}

@screen and(max-width:720px) {
  #Your mobile CSS here
}

2) 删除宽度标准并简单地依赖“屏幕”和“手持”而不是使用 HTML 中的整个查询：

<link href="css/master.css" media="screen" type="text/css" rel="stylesheet" />
<link href="css/mobile.css" media="handheld" type="text/css" rel="stylesheet" />

希望这可以帮助。

于 2013-04-23T03:43:00.153 回答
0

尝试更换你的

<link rel="stylesheet" type="text/css" media='screen and(min-width:721px)' href='css/master.css'/>

至

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 721px)" href="master.css" />

我没有在移动设备中尝试过您的问题，但是如果移动设备出现问题，请尝试也添加..并添加

<!DOCTYPE html>

在代码的开头。希望这可以帮助..

于 2013-04-23T03:51:08.970 回答