Bootstrap移动优先和媒体查询分组 [英] Bootstrap mobile first and media query grouping

问题描述

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

I am using latest bootstrap for a project. I am confused about the bootstraps mobile first approch and the less file structure

我的文件结构是

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

在自定义文件文件夹中。我试图为自定义css生成不同的样式表，而不触摸bootstrap.min.css

All my custom less files live in Custom files folder. I am trying to generate a different stylesheet for custom css without touching the bootstrap.min.css at all

在main.less文件中，我已经导入所有组件少的文件component1.less，components.less）

In main.less file i have imported all the component less files (component1.less, components.less)

为了实现移动优先，在每个组件文件中，我将移动样式作为默认样式规则，文件

To achieve mobile first approch, in each component file I have included mobile styles as default styles rules and the desktop styles at last of the file

/****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然后媒体查询

My question is When the css is generated it looks like a mess as a combination of default css and media queries instead of having default css first and then media queries

/****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)***/
....
/**************************************/
......

推荐答案

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

According to the style codeguide written by @mdo (the creator of bootstrap) http://codeguide.co/#css-media-queries media queries should be 'as close to their relevant rule sets whenever possible'

这篇关于Bootstrap移动优先和媒体查询分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！