画面の解像度によって異なる背景イメージですか？

Question

さまざまな画面解像度で背景画像を処理するにはどうすればよいと思いますか？

私は最も人気のある解像度ごとに別々の背景を作り、Jqueryに適切な解像度をロードさせることを考えていました。私はCSSにも開いています。皆さんありがとうございます。

Answer 1

使用media queriesを：

@media (min-width:800px) { background-image: url(bg-800.jpg) } 
@media (min-width:1024px) { background-image: url(bg-1024.jpg) } 
@media (min-width:1280px) { background-image: url(bg-1280.jpg) } 

あなたは、すべての可能なサイズをカバーすることはできません。特に、ブラウザが ' tフルスクリーンなので、あなたのデザインはこれを考慮に入れて幾分flexibleでなければなりません。

Answer 2

ウェブページのサイズに合わせて背景画像を伸ばした「バックストレッチ」と呼ばれるjQueryプラグインがあります。あなただけの、その後ロードされる背景を決める画面の解像度を取得したい場合は ちょうど見here

---

を取り、その後、これらのコードが役立つことがあります。

var h = screen.height; 
var w = screen.width; 

var BGList = { 
    '1024-768': 'background-url-1.jpg', 
    '1152-864': 'background-url-2.jpg', 
    '1280-600': 'background-url-3.jpg' 
} 

var myBG = BGList[ w+'-'+h ]; 
if (myBG){ 
    document.write("<style> body {background:url('"+myBG+"')} </style>") 
}else{ 
    alert("You have a strange screeen !") //--deal with undefined screen resolution here 
} 

Answer 3

更新：クロスブラウザのサポートのために

、以下の私の答えは「ロール独自の」方法です。しかし、ここ数年の間に、この問題を解決するために開発された優れたポリフィルがいくつかありました。通常は、すべての作業をやり直すのではなく、これらのいずれかを実行することをお勧めします。 Respond.jsは、よりよく知られているものの1つです。ちょうどそれにリンク：

<script src="/path/to/respond.js"></script> 

あなたのCSSファイルにあなたのメディアのクエリを書くと完了です。

---

robertcが指摘したように、CSSメディアクエリは、あなたの出発点でなければなりませんが、彼らがこの問題の完全な解決策ではないことに留意すべきです。残念ながら、CSSのメディアクエリはすべてのブラウザでサポートされていません（咳 IE）。 cssファイルのメディアクエリコードは、これらのブラウザでは無視されます。

CSSのメディアクエリに加えて、ビューポートのサイズを決定するバックアップJavaScriptソリューションを検討してから、bodyタグにクラスを追加するだけです。この例は、単に簡潔にするためにjqueryのを使用しています。

function setImageClass() { 
    switch(true) { 
     case($(window).width()>600): $("body").removeClass("w200 w400").addClass("w600"); 
     break; 
     case($(window).width()>400): $("body").removeClass("w200 w600").addClass("w400"); 
     break; 
     default: $("body").removeClass("w400 w600").addClass("w200"); 
     break; 
    } 
} 

$(document).ready(function() { 
    setImageClass(); 
}); 

$(window).resize(function() { 
    setImageClass(); 
}); 

ところで、これらのサイズは、単にすべてのデバイス上で簡単にテストのために、現実的ではありません。覚えておいて、それらに加えて、あなたはjavascriptのセットのクラスのルール設定する必要がありますので、CSSメディアクエリは、無視されます。

.w200 { background:red } 
.w400 { background:orange } 
.w600 { background:yellow } 

をしかし、あなたは2つのCSSルールが衝突したくありませんクエリとjsの両方が機能する場合、メディアクエリは同じ名前を使用する必要があります（後で配置する必要があります）。例：

私はこれを実際に実行するためにフィードバックを行います。これにはJavaScriptソリューションだけが含まれていますが、私は主なソリューションとしてメディアクエリを完全にサポートしています。Here is the full screen link.