尽管@media在源.css中，但CSS Media Tag无法在生产环境中工作，但可以在本地工作

Question

我正在尝试通过添加以下行来将现有网站修改为响应式：

@media only screen and (max-width: @screen-768 - 1){
...}

它在我的开发环境中可以正常工作，但是在生产时，在Google Chrome的检查过程中未找到@media行。无论如何，在检查页面源代码时，都会更新.css。

有什么建议吗？

Answer 1

请问为什么您使用@media only屏幕和（max-width：@ screen-768-1）{...}而不是

@media only屏幕和（最大宽度：767px）{...}

也许您在Google chrome inspect中看不到源代码的原因是因为开发人员使用了CSS HACK。

Answer 2

@media only screen and (max-width: @screen-768 - 1){...}并不是编写媒体查询的最佳方法。您可以编写@media only screen and (max-width:767px){...}

您会看到一个不错的描述和工作示​​例here