css - Bootstrap 3.0 媒体查询

Question

我正在开发一个基于 Boostrap 3(html5boilerplate 自定义构建)的小元素，并尝试使用“官方”媒体查询 in the boostrap documentation :

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

由于某种原因，媒体查询似乎不存在(@screen-sm、screen-md、screen-lg)，我正在 Bootstrap 文件中搜索它，但找不到任何引用。

我的示例代码(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) {}

基本上发生的事情是......什么都没有!

我在 Chrome 中遇到了这些错误: http://i.solidfiles.net/0d0ce2d2a7.png

有什么想法吗？

Answer 1

bootstrap 文档有点不清楚。

将这些 @... 参数用于最小宽度实际上是 less 语法，而不是 CSS。

你应该use the customize utility in Bootstrap (请参阅媒体查询断点)以设置您希望这些 screen-xxx 参数的值(例如，将 screen-sm 设置为 768px)。

然后当点击底部的编译按钮时，less代码被编译成CSS。此编译将用 768px 替换所有出现的 @screen-sm，其他参数也相同。