響應式背景與Twitter Bootstrap？

Question

我想爲網站上的背景設置響應式圖像排列。

例如，基於不同的屏幕分辨率，我想要加載不同的背景圖像。此外，如果我能定義不同的行爲，這將是有用的;例如，更高分辨率的桌面應該具有更大的伸展背景圖像，而上網本可能具有縮小版本以適應縮小版本，或者3GS iPhone將具有小平鋪圖像。

你將如何實現這種情況？

Answer 1

我相信這會幫助你解決你的問題。今天我在一個無關的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 Tricks

Answer 2

你可以投資於一個小jQuery的基礎上改變你的背景屏幕尺寸。下面是你可以做的一個例子：

if ($(window).width() < 1000) { 
    $('body').css('background','url("yourimage")'; 
} else { 
    $('body').css('background','url("yourimage")'; 
} 

你介意告訴我們你試過的東西嗎？

Answer 3

在this article中討論了幾種方法。最後一種方法可能正是你正在尋找的。它包含一個JavaScript函數，用於檢查窗口大小和設置背景。

Answer 4

你可以使用CSS3全頁面背景圖像在CSS-Tricks上解釋，然後根據需要使用jQuery回退。有一個很好的文章jQuery的方法在上Gaya Design Blog

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; 
} 

使用@apttap這個CSS代碼片段，您可以使用每個設備的像素比例多背景圖片沿着指定的@media查詢方法。