Twitter bootstrap 3 宽度取决于响应等级

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

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

问题是：我能不能在不重复数字的情况下更干爽地做这个？ 我的第一个想法是：

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

但显然，这一类并不适用

您知道如何在不使用另一组媒体查询的情况下执行此操作吗？

这可以通过较少的/sass混合来完成。例如，用更少的时间来定义

@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%;
  }
}