我可以使用媒体查询为不同的显示样式（xs，sm，md，lg）指定一定的宽度，但随后我必须重复作为引导媒体查询一部分的宽度
@media (min-width: 768px) {
img {
width: 20%;
}
}
问题是：我是否可以再做一次DRY-不重复数字？我的第一个想法是：
img.visible-xs {
width: 20%;
}
但显然，该类并不适用。
知道如何在不使用另一组媒体查询的情况下执行此操作吗？
这可以使用less/ sassmixins完成。例如，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%;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句