宽度取决于响应类

Question

I可以使用媒体查询为不同的显示样式(xs、sm、md、lg)指定一定的宽度，但随后我必须重复引导媒体查询的宽度。

@media (min-width: 768px) {
  img {
    width: 20%;
  }
}

问题是:我能不能做得更干净利落-而不重复数字？我的第一个想法是：

img.visible-xs {
  width: 20%;
}

但很明显那类不适用。

知道如何在不使用另一组媒体查询的情况下做到这一点吗？

Answer 1

这可以通过less/sass混合器来完成。使用less，只需定义

@screen-xs: ~"only screen and (max-width: 767px)";
@screen-sm: ~"only screen and (min-width: 767px) and (max-width: 991px)";
@screen-md: ~"only screen and (min-width: 992px) and (max-width: 1199px)";
@screen-lg: ~"only screen and (min-width: 1200px)";

然后你可以像这样使用它

img {
  @media @screen-xs {
    width: 20%;
  }
}