Question

我目前有以下带有内容的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。

Answer 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内容，这样你就可以找出原因。

祝你好运

Answer 2

老帖但也许我可以帮助别人。

我解决了在<head>...</head>

中添加此HTML的问题

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

Bootstrap忽略某些媒体查询

2 个答案: