Question

我正在为项目使用最新的bootstrap。我对bootstraps移动第一个approch和较少的文件结构感到困惑

我的文件结构是

---css
---js
---less
---mixins
-----..
-----...
----Custom_files
---------main.less
--------- component1.less
--------- component2.less

我的所有自定义文件都位于自定义文件文件夹中。我试图为自定义css生成一个不同的样式表，而无需触及所有的bootstrap.min.css

在main.less文件中，我导入了所有组件较少的文件（component1.less，components.less）

要实现移动优先approch，在每个组件文件中，我将移动样式作为默认样式规则和文件最后的桌面样式包含

/****Default Styles go here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

我的问题是，当生成css时，它看起来像是一个混乱的默认css和媒体查询的组合，而不是先默认css然后是媒体查询

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/
......

这可以吗？或者，如果它是错的，那么正确的做法是什么

Answer 1

根据@mdo（bootstrap的创建者）http://codeguide.co/#css-media-queries编写的样式代码指南，媒体查询应尽可能“尽可能接近相关规则集”

Answer 2

我认为这个问题的答案应该取决于你对它的看法。如果您是开发人员并希望编写可重用的代码，那么您应该同意@ mdo的规则，原因是：

这样做只会让人们在将来更容易错过它们。

但是当您是用户（浏览器）时，您希望样式表尽可能快地呈现。使用许多（相同的）媒体查询而不对它们进行分组会使CSS代码更长，并且（理论上）渲染速度更慢。是的，确实有人认为它无关紧要（Is there an advantage in grouping css media queries together?），并且当你压缩它时，大代码会变小（Merging media queries, using SASS and Breakpoint (Respond-To)）。

将两个视图放在一起时，您应该在编写Less代码时使用@ mdo规则，并在编译代码后运行post processor to group your media queries。

PS更详细地研究Bootstrap's grid Less code时，您会发现grid.less包含以下代码：

@media (min-width: @screen-sm-min) {
  .make-grid(sm);
}

如果您不关心对媒体查询进行分组，.make-grid(sm);也可以迭代.make-sm-column()中的mixins/grid.less mixin，如下所示，而不是使用复杂的循环来构建网格类：

// Generate the small columns
.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移动优先和媒体查询分组

2 个答案: