css - 值之间的 Less 和 Bootstrap 变量

Question

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

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

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

Answer 1

@media(最小宽度:@screen-xs-min)和(最大宽度:@screen-sm-min){
...CSS代码在这里
}

虽然作为一般规则，最好只对 Bootstrap 中的大部分 CSS 使用 max-width，这样您的样式规则就可以向下层叠用于较小的设备。所以，你可以使用:

@media(最大宽度:@screen-sm-min){
...CSS代码在这里
}

对于平板电脑，当您发现某些元素在手机上看起来不正确时，可以通过以下方式覆盖这些平板电脑规则:

@media(最大宽度:@screen-xs-min){
...CSS代码在这里
}

也就是说，我经常发现需要同时使用 max-width 和 min-width 进行小的调整，一旦我将响应式布局放在一起，通常是一两个样式规则。