上传到heroku后移动@media查询不起作用答案

【问题标题】：Mobile @media queries aren't working after uploading to heroku上传到heroku后移动@media查询不起作用
【发布时间】：2019-02-16 04:28:06
【问题描述】：

标题描述了它。

我有类似的 CSS 媒体查询

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

确保您的 index.html 文件中有这一行：

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

【讨论】：

【解决方案3】：

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

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

基本上：

点安装白噪声
在 requirements.txt 中添加白噪声
在 settings.py 中将“whitenoise.middleware.WhiteNoiseMiddleware”添加到 MIDDLEWARE = [...]

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

【讨论】：