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屋!