0

我正在设计一个响应式站点（我首先开发的主页是除了会话开始之外的所有 html，但有些页面会有很多 php，所以很明显我将主页保存为 php）。当我在我的 MAMP 服务器上进行测试时，一切正常——它可以在任何屏幕尺寸下正确加载所有 CSS。但是，当我将它加载到我的 fatcow 服务器上进行测试时，如果将浏览器缩小到为桌面模式设置的宽度以下，它根本不会加载 CSS（一切都变为默认值 - 黑色文本，没有颜色变化，没有边界，一切都是左对齐的，等等）。但是，如果您将浏览器窗口设置为最小的桌面尺寸，CSS 就会神奇地出现。我有响应式元标记（参见下面的代码）。为什么 CSS 总是链接在我的 MAMP 服务器上，但有条件地加载到互联网上？谢谢！

索引页标题代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
<!-- 
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build 
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<link rel="stylesheet" href="ajxmenu.css" type="text/css">
<script src="ajxmenu.js" type="text/javascript"></script>
<link rel="stylesheet" href="ajximagerotator.css" type="text/css">
<script src="ajximagerotator.js" type="text/javascript"></script>
</head>

正如您可能知道的那样，我正在使用 Dreamweaver 设计这个站点。我以前在 Notepad ++ 中编码时遇到过类似的问题，但通常 Dreamweaver 非常擅长这种事情，而无需我进行大量调整。

提前感谢您的帮助！

编辑：顺便说一句，刚刚在我的带有 LAMP 的 Linux VirtualBox 中进行了测试——在那里也可以正常工作。我想这可能是 Fatcow 的设置，但我不知道该去哪里。

4

1 回答 1

0

好吧，这不是真正理想的解决方案，但经过一番修修补补，我终于找到了解决方法。

Adobe Dreamweaver 的流体网格布局旨在让较大的屏幕从较小的屏幕 css 属性继承，除非另有说明。它首先不定义屏幕尺寸，然后逐步添加“@ at min-width”以开始对每个更大的屏幕进行更改。每个“@”部分中未更改的任何内容都会自动继承。

我的解决方案破坏了继承功能，但确实使 css 加载并在每个屏幕尺寸下适当地更改 - 我只需要重复我想要保持不变的功能。如果您在屏幕顶部添加“@”行并设置最大宽度而不是最小宽度，CSS 会分别加载每个屏幕尺寸，但它们都会加载。继承功能被破坏的原因是通过添加@ max-width 代码行，没有任何功能超出该点。

如果有人有更好的解决方案，我会全力以赴——这不是解决问题的理想方法，但至少它是一个不错的创可贴。

于 2013-11-22T20:08:19.733 回答