Bootstrap 忽略某些媒体查询 [英] Bootstrap ignores certain media queries

问题描述

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

I currently have the following scss file with the contents:

/* 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 文件，我会得到以下内容:

If I load up application.css file in Rails, I get the following:

/* 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 不存在，实际上编译似乎忽略了整个媒体查询.有没有办法解决这个问题?

Note that in the compiled file, we have the comment /* Desktop */ but the CSS inside the media query doesn't exist, infact it seems as if the compilation ignored the whole media query. Is there a way to work around this?

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

My goal is to have some css specific for that width range.

推荐答案

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

Without seeing your actual code, my best guess is that you have a gramatical error in the uncompiled file. There's no reason why you can't have some css for the desktop range.

你可以试试这个.

备份未编译的文件，然后开始一个新的:

Make a backup of your uncompiled file, then start a new one which just has:

/* 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;
    }
}

编译这个并惊喜，惊喜的是字体颜色会在不同的视角发生变化.

Compile this and surprise, surprise the font colours will change at different viewpoints.

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

Once you have this working add the other @media content back in piece by piece so you can pinpoint the cause.

祝你好运

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