php - 奇怪的 CSS 加载

Question

我正在重新设计客户的网站，以便他们能够自己编辑网站。我打算做的是让主要的“前端”页面混合使用 html 和 php。 html 呈现页面，而 php 包含外部菜单并抓取单个页面的内容，从而允许在不损害主页的情况下安全地编辑内容。

现在的问题是有一个 CSS 文档链接加载菜单我有两个但是发生的事情是我添加了一些 javascript 来检测屏幕尺寸并加载不同的 css 文档如果屏幕小于某个尺寸，但是该网站似乎加载了一半的 css，它格式化了菜单但将其全部留在了一个 block 中。

我正在使用的网站版本可在 http://www.letsmine.info/Yoga 获得

没有 .php 扩展名的主页(为了防止加载 php)是 http://www.letsmine.info/Yoga/index.txt

菜单是http://www.letsmine.info/Yoga/templates/menu.php

我相信问题是 javascript，但我不是 100% 确定。

Answer 1

更改包含文件的顺序。

目前你有这个:

<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 文档优先。因此，首先加载默认样式，最后加载覆盖样式。