Question

在制作之后我的网站根据分辨率改变了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在所有浏览器中停止工作。关于如何解决这个问题的任何建议？如果我能给你任何附加信息，请继续问。网站链接在这里-------------

-Thanks

- 编辑补充说w3c验证器认为XHTML 1.0 STRICT上的一切都很好

Answer 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中元素流的事物。无论屏幕大小如何，静态结构部分都会设置不会更改的规则。响应部分是您放置媒体查询的位置。为媒体查询找到断点的最佳方法是“将其压缩直到它破坏方法”。意思是关闭浏览器，直到页面看起来像废话，然后添加媒体查询并重新排列页面。

BTW，旧IE不支持媒体查询，因此您需要使用IE的条件注释添加名为css3-mediaqueries.js.的polyfill。它只是一个JS文件，可以使媒体查询在所有浏览器上运行。

修改：此外，请按此link并使用书签来查看您当前的屏幕尺寸。它对响应式设计非常有用。

Answer 2

根据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）删除宽度标准，只需依靠'screen'和'handheld'而不是在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" />

希望这有帮助。

Answer 3

尝试更换

<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>

在代码的开头。希望这会有所帮助..

CSS没有在Firefox或IE中加载

3 个答案: