css - 尽管@media 在源 .css 中，但 CSS 媒体标签不适用于生产，而是在本地工作

Question

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

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

它在我的开发环境中运行良好，但是在生产环境中，在 Google Chrome 中进行检查时不知何故找不到 @media 行。无论如何，当检查页面的来源时，.css 会更新。

有什么建议吗？

Answer 1

我可以问你为什么使用@media only screen and (max-width: @screen-768 - 1){ ...} 而不是

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

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

Answer 2

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

你可以在这里看到一个很好的描述和工作示​​例