以较少的方式定义媒体查询

Question

我正在尝试使用less在一个地方定义我的移动支持矩阵。我还看了this StackOverflow问题的例子。

方法1:不工作

@my-device-min-width: 375px;
@my-device-max-width: 414px;
@my-device-orientation: portrait;

@phoneRules: ~"only screen and (min-width: {@device-min-width}) and (max-width: {@device-max-width}) and (orientation: {@device-orientation})";

方法2:不工作

@my-device-min-width: {min-width: 375px;};
@my-device-max-width:  {max-width: 414px;};
@my-device-orientation: {orientation:portrait;};


@phoneRules: only screen and  (@device-min-width) and (@device-max-width) and (@device-orientation);

请提供一些解释和一个答案，以帮助我更好地理解它。

Answer 1

纯CSS？

@media screen and (min-width:320px) and (max-width:767px) and (orientation:portrait) {
  /* Your code here */
}

(它也会在更少的地方起作用。)