值之间的Less和Bootstrap变量

Question

我有默认的Bootstrap变量，它们工作正常，但我有：

@media (max-width: @screen-xs-min) {
}

如何在@screen-xs-min和@screen-sm-min之间设置变量？

Answer 1

@media (min-width: @screen-xs-min) and (max-width: @screen-sm-min){ ...CSS Code Here }

虽然作为一般规则，最好只对Bootstrap中的大多数CSS使用max-width，这样你的样式规则就会向下级联，以适应较小的设备。所以，你可以使用：

@media (max-width: @screen-sm-min){ ...CSS Code Here }

适用于平板电脑，当您发现某些元素在手机上看起来不正确时会覆盖以下平板电脑规则：

@media (max-width: @screen-xs-min){ ...CSS Code Here }

话虽这么说，我经常发现需要一起使用max-width和min-width进行微调，一旦我将响应式布局放在一起，通常会有一两个样式规则。