0

私は StackOverflow が非常に便利であることを発見したので、事前に助けてくれてありがとう.

http://test2.heyscout.com/で、レスポンシブ Web デザインの「ヒーロー div」に背景画像を適切に設定する方法を知りたいです。私は多くの設定で遊んでいますが、私はそれをしたいです：

  • ブラウザーのサイズが原因でジャンプすることなく、一貫して所定の位置にとどまります (たとえば、携帯電話では位置がずれたり、本来あるべきでない場所に空白ができたりします)。
  • em で設定しても、「オフラインで誰でも確認」のサイズが適切に変更されない
  • ボタンがモバイル デバイスで奇妙に見える

「ヒーロー div」を抑えるためのベスト プラクティスは何ですか? min-height で何かを行うか、実際の画像の寸法を修正する必要があると思います。ヒーロー div の高さをピクセルではなくパーセンテージで設定する必要がありますか?

また、「三半期の div」を常にページの下部 1/3 をうまく埋める方法についてのアドバイスもあれば、すばらしいと思います。ブラウザの高さが予想よりも大きいと、奇妙に見えると思います。RWD では高さ属性だけを保持するのが最善であると読みましたが、適切にサイズ変更するためのトリックがあるかどうか疑問に思っています。

4

3 に答える 3

1

メディアクエリを調べましたか? 基本的に、ブラウザーの幅 (および高さ) に基づいて特定の CSS を設定できます。これにより、特定のブラウザー サイズでページがどのように表示されるかを制御できます。

例 - 異なる幅の CSS:

@media screen and (max-width: 600px) {
  /* add some CSS here for 600px maximum width*/
}

@media screen and (max-width: 960px) {
  /* add some CSS here for 960px maximum width*/
}
于 2013-04-08T18:00:09.763 に答える
1

背景画像が常に div を埋めるようにするには、IE8 をサポートする必要がない限り、 background-size: cover2を使用します。

PC/タブレット/ハンドヘルドでフォント サイズが適切に表示されない場合は、メディア クエリを使用して、特定の解像度のフォント サイズを設定してみてください。

あなたのボタンが「奇妙に見える」のですが、どうすればよいかわかりません。

今後は、質問の焦点を絞り込むようにしてください。:)

于 2013-04-08T18:00:37.610 に答える
0

与える

background-size:contain;

含まれていることでサイズが自動調整されるため、これで問題が解決する場合があります。

于 2013-04-08T18:41:31.190 に答える