CSS Bootstrap 3.0 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18796505/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3.0 Media queries
提问by user2646903
I'm working on a small project based on Boostrap 3 (html5boilerplate custom build) and trying to use the "official" media queries in the boostrap documentation:
我正在开发一个基于 Boostrap 3（html5boilerplate 自定义构建）的小项目，并尝试使用boostrap 文档中的“官方”媒体查询：
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }
For some reason the media queries doesn't seem to exist (@screen-sm, screen-md, screen-lg), I'm searching for this in the bootstrap files but can't find any references.
出于某种原因，媒体查询似乎不存在（@screen-sm、screen-md、screen-lg），我正在引导文件中搜索它，但找不到任何引用。
My example code (main.css):
我的示例代码（main.css）：
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) {
.header-btn {display: none;}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) {
.slogan {display: none;}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) {}
Basically what happening is... nothing!
基本上发生的事情是……什么都没有！
I get those errors in Chrome: http://i.solidfiles.net/0d0ce2d2a7.png
我在 Chrome 中遇到这些错误：http: //i.solidfiles.net/0d0ce2d2a7.png
Any ideas?
有任何想法吗？
回答by mccannf
The bootstrap documentation is a little unclear.
引导程序文档有点不清楚。
Using these @...parameters for min-width is in fact lesssyntax, not CSS.
将这些@...参数用于 min-width 实际上是更少的语法，而不是CSS。
You should use the customize utility in Bootstrap(see Media queries breakpoints) to set up what you want these screen-xxxparameters to be (e.g. set screen-sm to be 768px).
您应该使用 Bootstrap 中的自定义实用程序（请参阅媒体查询断点）来设置您想要的这些screen-xxx参数（例如将 screen-sm 设置为 768px）。
And then when click the Compile button in the bottom, the less code is compiled to CSS. this compilation will replace all occurrences of @screen-sm with 768px, and the same for the other parameters.
然后当点击底部的 Compile 按钮时，较少的代码被编译为 CSS。此编译将用 768px 替换所有出现的 @screen-sm，其他参数也相同。
回答by Marcus R?dell
@adonbajrami: I think you need to add @import "myStyle.less"in the bottom of the bootstrap.lessfile.
@adonbajrami：我认为您需要@import "myStyle.less"在bootstrap.less文件底部添加。
The file bootstrap.lessimports variables.less.
Including your file in the same parent file will give your file myStyle.lessaccess to the variables declared in variables.less.
该文件bootstrap.less导入variables.less. 将您的文件包含在同一个父文件中将使您的文件myStyle.less可以访问在 variables.less 中声明的变量。
(Sorry for not commenting in place, but I'm not yet able to.)
（抱歉没有评论到位，但我还不能。）
