移动到 heroku 后，移动@media查询不起作用

Question

标题描述了它。

我有 CSS 媒体查询，例如

@media only screen and (max-width: 1080px){...}

(也尝试没有"唯一的屏幕和"(
他们使用智能手机在本地主机上完美工作。但是当我将代码提交到 heroku 时，媒体查询拒绝工作，并给我与桌面完全相同的网站。 有什么建议吗？

Answer 1

试试这个@media only screen and (max-width: 800px) {}并尝试将其添加到视图中而不是在 css 文件中

<style type="text/css">
@media only screen and (max-width: 800px) {}
</style>

Answer 2

确保索引.html文件中有以下行：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

我也遇到了这个问题。我不知道您是否像我一样使用某些Web框架，但是如果是这样，您可能会遇到如何合并css文件的问题。

我正在使用 Django，并通过安装 Whitenoise 解决了这个问题，这是一个帮助在 Django 应用程序中提供静态文件的项目。 Heroku 有一篇有用的文章。

基本上：

1. 点安装白噪声
2. 将白噪声添加到要求中.txt
3. 将"whitenoise.middleware.WhiteNoiseMiddleware"添加到中间件 = [...] 在 settings.py

现在对我来说一切似乎都很好。不必在视图中包含媒体查询或将任何 css 标记为重要。