响应式 CSS 在本地服务器上正确加载，只有桌面在远程正确加载答案

【问题标题】：Responsive CSS loads correctl on local server, only desktop loads correctly on Remote响应式 CSS 在本地服务器上正确加载，只有桌面在远程正确加载
【发布时间】：2013-11-21 18:48:13
【问题描述】：

我正在设计一个响应式网站（我首先开发的主页是除了会话开始之外的所有 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 非常擅长这种事情，而无需我进行大量调整。

提前感谢您的帮助！

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

【问题讨论】：

你能看到你浏览器的开发工具中加载的 CSS 文件吗？

标签： php html css remote-server localserver

【解决方案1】：

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

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

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

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

【讨论】：