宽度取决于响应类

Question

我可以使用媒体查询为不同的显示样式（xs，sm，md，lg）指定一定宽度但是我必须重复作为引导媒体一部分的宽度查询

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

问题是：如果不重复这些数字，我可以做得更干吗？ 我的第一个想法是：

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

但显然该课程不适用。

不知道如何在不使用其他媒体查询的情况下执行此操作吗？

Answer 1

可以使用less / sass mixins来完成此操作。例如。使用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%;
  }
}