Question

我不确定这是一个需要编码解决方案还是只需要理论解释的问题，但这里有...

我有一个链接多个样式表+字体的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的Dev Tools中的设备模拟选项（响应功能完好无损）。所以一切都适用于桌面浏览器，甚至是模拟移动设备的浏览器。以下是后者的屏幕截图：

Chrome desktop (with dev tools simulating device)

但是当我在Android Chrome浏览器上打开文件（Nexus 6P;所有内容都已更新）时，我明白了：

Chrome mobile

从视觉角度来看，很明显CSS根本不被识别（但它确实识别了Font Awesome图标）。这是我的设备的问题，我在index.html或其他什么地方引用CSS文件的方式？

我的所有文件（图像，本地CSS）都使用Dropbox存储在同一个文件夹中，并且所有引用都可以在桌面上正常工作。当我使用手机时，我打开Dropbox，找到我的index.html文件，然后使用Chrome打开它。我没有在另一台移动设备上测试过这个。

我确实使用了我的index.html引用其CSS文件的方式，并且将所有CSS（字体和图标除外）放在标记中似乎有效。这真的搞乱了index.html，所以我想知道这是否是解决这个问题的唯一解决方案。我还没试过@import，但这显然是不好的做法......（？）

Answer 1

这可能与dropbox有关。你不应该使用Dropbox作为主机。尝试获取免费的共享虚拟主机帐户，将文件上传到该帐户并从中访问。

我感到惊讶的是，除非您将文件同步到您的计算机并且正在以这种方式查看，否则我们会在您的桌面上工作吗？

链接的CSS未在移动设备上显示

1 个答案: