Question

我正在设计一个响应式网站（我首先开发的主页，除了会话开始以外都是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的一个场景，但我不知道该去哪里。

Answer 1

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

Adobe Dreamweaver的流畅网格布局旨在让较大的屏幕继承自较小的屏幕css属性，除非另有说明。它通过首先不定义屏幕大小，然后逐步添加“@ at min-width”来开始每个更大屏幕的更改来实现这一点。每个“@”部分中未更改的内容将自动继承。

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

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

响应式CSS在本地服务器上加载纠正，只有桌面在Remote上正确加载

1 个答案: