我正在重新设计客户的网站，以便他们能够自己编辑网站。我打算做的是将主要的"前端"页面与html和php混合在一起。html呈现页面，而php包括一个外部菜单，并获取单个页面的内容，从而在不损害主页面的情况下安全地编辑内容。
现在的问题是，链接了一个加载菜单的CSS文档。我有两个，但实际情况是，我添加了一些javascript来检测屏幕大小，如果屏幕小于某个大小，则加载一个不同的CSS文档。然而，网站似乎加载了一半的CSS，它格式化了菜单，但将其全部保留在一个块中。
我正在工作的网站版本可在http://www.letsmine.info/Yoga
没有.php扩展名的主页（为了防止加载php）是http://www.letsmine.info/Yoga/index.txt
菜单是http://www.letsmine.info/Yoga/templates/menu.php
我相信问题出在javascript上，但我不能百分之百确定。
更改包含文件的顺序。
目前你有这个：
<script type="text/JavaScript">
var screenwidth = screen.width;
if (screenwidth < 1180){
document.write('<link rel="stylesheet" href="css/ldrop.css" type="text/css" media="screen" />');
}
else
{
document.write('<link rel="stylesheet" href="css/drop.css" type="text/css" media="screen" />');
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Alignment Courses</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
更改为：
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
var screenwidth = screen.width;
if (screenwidth < 1180){
document.write('<link rel="stylesheet" href="css/ldrop.css" type="text/css" media="screen" />');
}
else
{
document.write('<link rel="stylesheet" href="css/drop.css" type="text/css" media="screen" />');
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Alignment Courses</title>
原因？最后一个要加载的CSS文档优先。因此，首先加载默认样式，最后加载替代样式。
增加style.css..中#nav的宽度