Bootstrap 3.0媒体查询 [英] Bootstrap 3.0 Media queries

问题描述

我正在开发一个基于Boostrap 3（html5boilerplate自定义构建）的小项目，并尝试使用官方媒体查询

  / *超小设备（手机，最大480像素）* / 
 / *没有媒体查询，因为这是Bootstrap中的默认值* / 
 
 / *小设备（平板电脑，768像素及以上）* / 
 @media @ screen-sm）{...} 
 
 / *中型设备（台式机，992px及以上）* / 
 @media（min-width：@ screen-md）{.. 。} 
 
 / *大型设备（大型桌面，1200像素及以上）* / 
 @media（min-width：@ screen-lg）{...} 
  

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

我的示例代码（main.css）：

  / *小型装置（平板电脑，768像以上）* / 
 @media（min-width：@ screen-sm）{
 
 .header-btn {display：none;} 
 
} 
 
 / *中型设备（台式机，992px及以上）* / 
 @ media（min-width：@ screen-md）{
 
 .slogan {display：none;} 
} 
 
 / *大型设备and up）* / 
 @media（min-width：@ screen-lg）{} 
  

基本上发生了什么...没什么！

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

任何想法？

使用这些 @ .. min-width的参数实际上是较少语法，而不是 CSS

。

您应在Bootstrap 中使用customize实用程序（请参阅媒体查询断点）以设置你想要这些 screen-xxx 参数是（例如set screen-sm to be 768px）。

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

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:

/* 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.

My example code (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

Any ideas?

解决方案

The bootstrap documentation is a little unclear.

Using these @... parameters for min-width is in fact less syntax, not CSS.

You should use the customize utility in Bootstrap (see Media queries breakpoints) to set up what you want these screen-xxx parameters to be (e.g. set screen-sm to be 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.

这篇关于Bootstrap 3.0媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！