0

我目前有以下包含内容的 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
}

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

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

4

2 回答 2

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 内容逐个添加回来，以便查明原因。

祝你好运

于 2013-02-08T13:10:06.203 回答
0

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

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

<head>
    ...
    <meta name="viewport" content="width=device-width,initial-scale=1">
    ...
</head>
于 2017-01-31T15:53:09.110 回答