Bootstrap 3.0 媒体查询

Posted 2023-03-06

【中文标题】Bootstrap 3.0 媒体查询

【英文标题】：Bootstrap 3.0 Media queries

【发布时间】：2013-09-18 17:49:43

【问题描述】：

我正在开发一个基于 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），我正在引导文件中搜索它，但找不到任何参考。

我的示例代码（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

有什么想法吗？

【参考方案1】：

引导文档有点不清楚。

为 min-width 使用这些@... 参数实际上是 less 语法，而不是 CSS。

您应该use the customize utility in Bootstrap（请参阅媒体查询断点）来设置您希望这些screen-xxx 参数是什么（例如，将 screen-sm 设置为 768px）。

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

【讨论】：

但是当我调用 LESS "@media (min-width: @screen-sm) ... " 时，它会显示“无法识别的输入”。我正在使用 SimpleLESS。我发现@screen-sm 在 bootstrap.less 768px 中具有价值。我该如何解决这个问题？

@edonbajrami，抱歉 - 对 SimpleLESS 一无所知。我建议为此创建一个全新的问题 - 应该有人能够帮助您。

【参考方案2】：

@adonbajrami：我认为您需要在bootstrap.less 文件的底部添加@import "myStyle.less"。

文件bootstrap.less 导入variables.less。 将您的文件包含在同一个父文件中将使您的文件 myStyle.less 可以访问 variables.less 中声明的变量。

（很抱歉没有在适当的地方发表评论，但我还不能。）