Bootstrap 移动优先和媒体查询分组

Question

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

我的文件结构是

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

我所有的自定义 less 文件都在自定义文件夹中。我正在尝试为自定义 css 生成不同的样式表，而根本不触及 bootstrap.min.css

在 main.less 文件中，我导入了所有无组件文件（component1.less、components.less）

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

/****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 媒体查询应该是'as close to their relevant rule sets whenever possible'

Answer 2

我认为这个问题的答案应该取决于你看待它的方式。当你是一名开发人员并且想要编写可重用的代码时，你应该确实同意@mdo 的规则，因为：

Doing so only makes it easier for folks to miss them in the future.

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

将两个视图放在一起，您可能应该在编写 Less 代码时使用@mdo 的规则，并在编译代码后使用运行 a 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); 也可以遍历 mixins/grid.less 中的 .make-sm-column() 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 移动优先和媒体查询分组

Bootstrap mobile first and media query grouping

css

less

twitter-bootstrap