媒体查询未显示在 Heroku 应用程序上答案

【问题标题】：Media Queries Not Showing Up On Heroku App媒体查询未显示在 Heroku 应用程序上
【发布时间】：2021-07-27 05:13:02
【问题描述】：

这是我十个月来第一次寻求这样的帮助，因为到目前为止，我一直能够找到答案或弄明白。感谢您的时间和帮助。

我花了无数个小时为我正在创业的妹妹建立这个网站，我已经完成了一切。在本地它是完美的，但在 Heroku 上只有桌面版本可以工作，并且没有任何媒体查询正在启动。我没有使用框架 - 只是 JavaScript、HTML、CSS、NodeJS/Express。我之前也曾在 heroku 上托管过同样的应用程序，但那次，因为我仍然是菜鸟，我将我的两个页面设置为 67% 缩放。我想不出办法让 PUG 页面以这种方式呈现，所以我不得不重做这些页面的样式。

所以以前，只有移动版本可以运行，桌面版本不行。现在，只有桌面版有效，移动版无效……我梳理了我的代码、css 和节点，并尝试了各种修复，从调整我提供静态文件的路线到在样式链接前面插入句点和反斜杠。

这里是github的链接：https://github.com/MagentaSpruce/nettlesHerbs

我已经检查了我能找到的所有 google 答案 - 我在两个单独的文件中有超过 6000 行 CSS，所以在视图中使用代码将是一个糟糕的和最后的最后选择

再次，一切都在本地工作，我认为这只是一个 heroku 问题，但此时我需要帮助。这是一个大型项目，这是我第一次在这里发帖

这是一个媒体查询的例子：

@media only screen and (min-width: 1224px) {.nav-link {font-size: 6rem;}

这是我将样式表导入 .html 文件的方式：

    <link rel="stylesheet" href="css/style2.css" />

这是我将样式表导入 PUG 文件的方式：

        link(rel='stylesheet' href='/css/style2.css')

我在所有相关文件的头部都有这个相同的元标记，包括 .index 和 .pug：

       meta(name='viewport' content='width=device-width, initial-scale=1.0')

我的文件树有公共文件夹：public -> css -> STYLESHEETS HERE

这就是我提供静态文件的方式：app.use(express.static(path.join(__dirname, 'public')));

我已经尝试过使用 /public

我试过 ../public/css/style2.css 我试过 ./css/style2.css 我试过 /css/style2.css 我试过 /public/css/style2.css 任何时候我使用public 任何样式在heroku中都不起作用。如果我使用 ./css 或 /css ，则桌面样式显示得很好，当我进入 google dev 时，它会在那里显示媒体查询，但是当我访问 heroku 上的网站或使用移动设备从我的开发网站访问该网站时，该网站很糟糕 -桌面版以 0 响应挤进移动版。

请让我知道我还需要在这里提供什么。我无意冒犯，但我姐姐依靠我来为她的业务工作，我愿意为一个可行的解决方案付费。请帮忙！

【问题讨论】：

标签： html css heroku media-queries

【解决方案1】：

对于那些在我可怜和绝望中挣扎的可怜的灵魂，不要害怕！我想通了！！！

现在 - 如果您使用的是框架，那么 IDK - 也许这可行，也许它不可行。

但是！如果您使用的是 nilla，请检查您的媒体查询。 Heroku 构建过程将产生像这样的更高级的媒体查询，导致它们不显示！ - 即使一切都在谷歌开发中完美运行！流氓！

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}

因此，如果您尝试做这样的事情，那么 - 不会在 Heroku 上工作。相反，只需像这样简化它，

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

瞧，您的媒体查询现在将在您的 heroku 部署中运行。哇！

感谢朋友们！

【讨论】：