@media屏幕与（max-width：770px）和@media屏幕之间的区别是什么（最大宽度：770px + 30px）

Question

我刚刚得到了一个我应该继续工作的项目。在这个项目的CSS文件中，我找到了以下代码：

@media screen and (max-width: 770px + 30px) {
    .rw-layout {
        margin: 10px;
    }
}

我试图了解它如何影响元素.rw-layout，但它无效。

我试图在Firefox的开发者工具中查看，而不是其他人的信息：

所以我要问的问题是，@media screen and (max-width:770px + 30px)在项目中的用途是什么？

Answer 1

这是无效的CSS，并且在许多（如果有的话）浏览器中都无法使用。 如果我不得不猜测它是如何发生的，一种可能的情况是他可能在像CSS这样的CSS预处理器中使用变量进行媒体查询 - 类似于：

$tablet: 770px;
$pad: 30px;

@media screen and (max-width: $tablet + $pad) { }

但变量最终被转换而不是在编译期间加起来。

无论哪种方式，它的无意义代码都是当前编写的，不会执行的 - 它并不代表800px或770px。