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

Question

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

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

但是我遇到一个错误，提示“ @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;
    }
}

DEMO