1

これには簡単な答えがあると思います...

Twitter Bootstrapを使用して、style.css.erbファイルに次のように記述します。

.login_page body {height:100%;
        max-width:inherit;
        margin:0 20px;
        background-image: url(<%= image_path 'oap_dotlogo.png' %>);
        background-repeat: no-repeat;
            background-position: 5%, 80%;
        background-color: #E3F5FD;
    }

背景のロゴがお尻の痛みである電話を除いて、それは素晴らしいです。そのロゴを携帯電話にドロップしたいのですが。

bootstrap- sensitive.cssがすでに.hidden-phoneを定義していることがわかります。

@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

では、background-imageタグに.hidden-phoneクラスが含まれるように、style.css.erbを変更するにはどうすればよいですか？

style.css.erbに.hidden-phoneを追加するいくつかの順列を試しましたが、何も機能していないようです。構文が間違っている必要があります。

ありがとう！デイブ

4

2 に答える 2

2

ここでCSSとHTMLを混同しているようです。あなたが言う時：

[H]背景画像タグが.hidden-phoneクラスを持つようにstyle.css.erbを変更しますか？

...CSS宣言にクラスを追加することはできません。実際には要素（この場合）を非表示bodyにするのではなく、小さい画面サイズでbackgroundプロパティを変更する必要があります。したがって、すでに持っているメディアクエリ内に、これを追加します。

@media (max-width: 767px) {
  .login_page body { background-image: none; }
  ...
  all your other small-screen styles
}

次に、デフォルトでが表示さbackground-imageれ、小さな画面では削除されます。画像が大きい場合は、モバイルファーストのアプローチを検討してください。つまり、@ po228で説明したように、逆の操作を行いbackground-imageます。ビューポートの幅を大きくする場合にのみを追加します。

于 2013-03-14T15:57:52.937 に答える
0

あなたはとても近くにいたようです。電話に表示されないスタイルを定義するには、最大幅ではなく最小幅を使用する必要があります。次のことを試してください。

@media only screen and (min-width: 768px) {
    .login_page body {
        background-image: url(<%= image_path 'oap_dotlogo.png' %>);
        background-repeat: no-repeat;
        background-position: 5%, 80%;
    }
}
于 2013-03-14T15:49:37.133 に答える