我正在一个基于Boostrap 3(html5boilerplate custom build)的小项目，并尝试使用“官方”媒体查询
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)，我正在引导文件中搜索，但找不到任何引用。
我的示例代码(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
有任何想法吗？
解决方法
引导文件有点不清楚。
使用这些@ …参数的最小宽度实际上是较少的语法，而不是CSS。
您应该use the customize utility in Bootstrap(请参阅媒体查询断点)设置您希望这些screen-xxx参数(例如将screen-sm设置为768px)。
然后单击底部的“编译”按钮时，较少的代码将编译为CSS。这个编译将用768px替换所有出现的@ screen-sm，其他参数也是一样的。
