我不确定这是一个需要编码解决方案的问题还是只是一个理论解释,但这里是...
我有一个链接几个样式表+字体的HTML文件:
<head>
<meta charset="UTF-8">
<title>T6</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="parallax.css" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="annex.css" type="text/css">
</head>
CSS 文件与 index.html(在 Dropbox 上)位于同一文件夹中。它们在我的桌面上的Chrome和Edge上看起来很好,以及通过Chrome的开发工具的设备模拟选项(响应功能完好无损)。因此,一切都可以在桌面浏览器甚至模拟移动设备的浏览器上运行。这是后者的屏幕截图:
- Chrome 桌面(使用开发工具模拟 设备)
但是当我在我的Android Chrome浏览器(Nexus 6P;一切都更新了)上打开文件时,我得到了这个:
- 铬移动版
从视觉的角度来看,很明显CSS根本没有被识别(但它确实识别了Font Awesome图标)。这是我的设备、我在 index.html 上引用 CSS 文件的方式或其他方面的问题吗?
我的所有文件(图像,本地CSS)都使用Dropbox存储在同一个文件夹中,并且引用在桌面上都可以正常工作。使用手机时,我会打开 Dropbox,找到我的索引.html文件,然后使用 Chrome 打开它。我还没有在另一台移动设备上对此进行测试。
我确实尝试了我的索引.html引用其CSS文件的方式,并且将所有CSS(字体和图标除外)放在标签中似乎都可以工作。这确实使索引.html混乱,所以我想知道这是否是解决此问题的唯一解决方案。我还没有尝试过@import,但这显然是不好的做法......(?)
这可能与 Dropbox 有关。您不应将 Dropbox 用作主机。尝试获取一个免费的共享虚拟主机帐户,在那里上传您的文件并从中访问它。
tbh 我很惊讶它在您的桌面上运行,除非您将文件本地同步到您的计算机并以这种方式查看它们?