いくつかの異なるモニタタイプがあります。したがって、Webページは、さまざまな画面解像度に対応する必要があります。今日は4Kモニターを使用していますが、背景画像のほとんどはまだ「唯一の」HDです。しかし、これは私が直面している唯一の問題ではありません。最も重要なことは、現在使用されているモニターの解像度がHTMLまたはCSSを使用してどのような解像度であるかをどのように知っていますか？私のページのHD背景を設定し、誰かが私のサイトを開くために4Kモニターを使用する場合、彼/彼女は私の背景の下部を表示し、したがって、非常にいいではない背景画像の下のWebページの空いている部分が表示されます。この問題の解決策は何ですか？HTML/CSSのさまざまな解像度との互換性はどうですか？
私はあなたが探しているものは、メディアクエリを介してCSSを介して達成できると思います。これは、基本的に、さまざまな画面解像度のHTMLをスタイルすることができます。構文もかなり理解しやすいです。
これらのメディアクエリをCSSファイル内で使用する方法の1つは、ここに以下の例があります。
/*This is for all screen types as you would guess*/
body{
background-image: url('img/large-background.jgp');
/*This will target screens with max width of 768px i.e. tablets*/
@media (max-width: 768px) {
body {
background: url('img/less-large-background-for-devices.jpg');
}
}
はまたthese docsを見て、彼らは非常に包括的で理解しやすいです。彼らは、これとcssを使ってさまざまな画面をターゲット設定する他の方法についてさらに詳しく説明します。