如何为媒体查询创建一个名为@phone 的变量？

Question

我需要让我的页面响应最大宽度为 500 像素的 phone。通常我会做 @media screen and (max-width: 500px)，但他们希望我使用 LESS 并创建一个包含媒体字符串的 @phone 变量。现在我将媒体查询嵌套在 @phone 中，如下所示：

@phone {
    @media screen and (max-width: 500px) {
    }
}

但我收到一条错误消息 "unknown at rule at @phone"，所以这可能是错误的。我至少在球场上吗？需要改变什么？

Answer 1

希望对您有所帮助

@phone: ~"only screen and (max-width:500px)";
@media @phone {
    body {
        font-size: 30px;
    }
}

编译以上代码后，结果如下

@media only screen and (max-width:500px) {
     body {
         font-size: 30px;
    }
}

How do I make a variable called @phone for a media query?