サイトの背景をレスポンシブな画像配置にしたいと考えています。
たとえば、さまざまな画面解像度に基づいて、さまざまな背景画像をロードしたいと考えています。さらに、さまざまな動作を定義できれば便利です。たとえば、解像度の高いデスクトップでは引き伸ばされた背景画像が大きくなり、ネットブックではその背景画像が収まるように縮小されて小さくなり、3GS iPhone ではタイル状の画像が小さくなります。
そのようなシナリオをどのように実装しますか?
サイトの背景をレスポンシブな画像配置にしたいと考えています。
たとえば、さまざまな画面解像度に基づいて、さまざまな背景画像をロードしたいと考えています。さらに、さまざまな動作を定義できれば便利です。たとえば、解像度の高いデスクトップでは引き伸ばされた背景画像が大きくなり、ネットブックではその背景画像が収まるように縮小されて小さくなり、3GS iPhone ではタイル状の画像が小さくなります。
そのようなシナリオをどのように実装しますか?
これが問題の解決に役立つと思います。今日、関係のない Google の探索で次のライブラリに出会いました: eCSSential。チケットのようです。ライブラリを使用して画面サイズを検出し、現在のビューポートと現在のデバイスの画面サイズを考慮して、適切な CSS ファイルを読み込むことができます。かなり気の利いた。
私の回答の前の部分と組み合わせると、問題に対処するためのかなり良い方法があると思います.
以下は、照会できる画面サイズの例にすぎませんが、アイデアは得られます。背景はシナリオごとにスタイルを設定できます。
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
背景は、解像度ごとに異なるスタイルにすることができます。たとえば、次のようになります。
@media only screen
and (min-device-width : [width])
and (max-device-width : [width]) {
body {
background-image: url('../img/image.png');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
// or you could just center the image if it's bigger than the current viewport
// background-position: center center;
}
}
クレジット: このほとんどはCSS のトリックによるものです
少し jquery に投資して、画面サイズに基づいて背景を変更できます。できることの例を次に示します。
if ( $(window).width() < 1000 ) {
$('body').css('background','url("yourimage")';
} else {
$('body').css('background','url("yourimage")';
}
お時間があれば、試したことを教えていただけませんか?
この記事では、いくつかの方法について説明します。最後の方法はまさにあなたが探しているものかもしれません。ウィンドウサイズのチェックや背景の設定を行う JavaScript 関数が含まれています。
ここのCSS-Tricksで説明されている CSS3 Full Page Background Image を使用し、必要に応じて jQuery フォールバックを使用できます。Gaya Design Blogに、jQuery メソッドに関する優れた記事があります。
CSS:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media
@aptap で指定されたクエリ メソッドとこの CSS スニペットを使用すると、デバイスのピクセル比ごとに複数の背景画像を使用できます。