Bootstrap 忽略某些媒体查询答案

【问题标题】：Bootstrap ignores certain media queriesBootstrap 忽略某些媒体查询
【发布时间】：2013-02-08 05:59:13
【问题描述】：

我目前有以下包含内容的 scss 文件：

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
// Something here
}

/* Desktop */
@media (min-width: 981px) and (max-width: 1198px) {
// Something here
}

/* Large Desktop */
@media (min-width: 1200px) {
// Something here
}

如果我在 Rails 中加载 application.css 文件，我会得到以下信息：

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
  /* Remove gap between nav and content*/
  /* line 120, ../../app/assets/stylesheets/static_pages.css.scss */
  .navbar-fixed-top {
    margin-bottom: 0 !important;
  }

  /* Remove any padding from the body */
  /* line 125, ../../app/assets/stylesheets/static_pages.css.scss */
  body {
    padding-top: 0 !important;
  }

  /* line 133, ../../app/assets/stylesheets/static_pages.css.scss */
  .static_pages-controller-home .landing .sign-up {
    display: none;
  }
  /* line 142, ../../app/assets/stylesheets/static_pages.css.scss */
  .static_pages-controller-home .container #students #bulletpoints h2, .static_pages-controller-home .container #students #bulletpoints p {
    text-align: left !important;
  }
}
/* Desktop */
/* Large Desktop */
@media (min-width: 1200px) {
  /* Remove gap between nav and content*/
  /* line 168, ../../app/assets/stylesheets/static_pages.css.scss */
  .navbar-fixed-top {
    margin-bottom: 0 !important;
  }

  /* Bypass left & right padding */
  /* line 186, ../../app/assets/stylesheets/static_pages.css.scss */
  .static_pages-controller-home .container #students #bulletpoints h2 {
    text-align: left !important;
  }
}

请注意，在编译后的文件中，我们有注释/* Desktop */，但媒体查询中的 CSS 不存在，事实上编译似乎忽略了整个媒体查询。有没有办法解决这个问题？

我的目标是有一些特定于该宽度范围的 css。

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap sass

【解决方案1】：

没有看到你的实际代码，我最好的猜测是你在未编译的文件中有语法错误。没有理由不能为桌面范围提供一些 css。

你可以试试这个。

备份你的未编译文件，然后开始一个新的，它有：

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
// Something here

    font-color{
    color:red;
    }
}

/* Desktop */
@media (min-width: 981px) and (max-width: 1198px) {
// Something here

font-color{
    color:green;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
// Something here

font-color{
    color:blue;
    }
}

编译这个，惊喜，字体颜色会在不同的角度发生变化。

完成这项工作后，将其他@media 内容逐个添加回来，以便查明原因。

祝你好运

【讨论】：

【解决方案2】：

旧帖子，但也许我可以帮助某人。

我解决了这个问题，在 <head>...</head> 中添加这个 HTML

<head>
    ...
    <meta name="viewport" content="width=device-width,initial-scale=1">
    ...
</head>

【讨论】：