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.cssRails でファイルをロードすると、次のようになります。

/* 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 に答える