Question

自从在响应式网站上工作以来，我已经习惯于在媒体查询中定义我的列宽......

例如

@media (min-width: @screen-sm-min) { 
    #main-header {
        .make-xs-column(12)
    }
} 

@media (min-width: @screen-md-min) {
    #main-header {
        .make-xs-column(6)
    }
}

但是，现在我们在Boostrap 3中有xs / sm / md / lg列混合，这似乎是错误的做事方式。我几乎倾向于为实际的列宽创建一个单独的LESS文件，这意味着只需要使用这些mixin扩展我的CSS类，而无需在媒体查询中实际包装列宽声明。

我希望这有道理吗？我很可能从一个奇怪的角度进入框架！

其他人都在解决这个问题，我主要担心的是保持代码清洁。

由于菲尔

Answer 1

如果你看一下Bootstrap： https://github.com/twbs/bootstrap/blob/master/less/mixins.less

你可以发现，像.make- * -column这样的mixins有媒体查询，并且在其他媒体查询中使用这些mixins是非常糟糕的方式。

.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

Bootstrap 3x在媒体查询中组织列大小

1 个答案: