响应的背景与Twitter Bootstrap？ [英] Responsive backgrounds with Twitter Bootstrap?

问题描述

我想对网站上的背景做出响应式图像安排。

例如，根据不同的屏幕分辨率，我想加载不同的背景图片。此外，如果我可以定义不同的行为将是有用的;例如，较高分辨率的桌面会具有较大的拉伸背景图像，而上网本可能具有较小版本的缩小以适合，或者当3GS iPhone具有较小的平铺图像时。

如何实现这样的场景？

解决方案

我相信这将帮助你解决你的问题。我今天在一个无关的Google探险中遇到了以下图书馆： eCSSential 。它看起来是票。您可以使用库来检测屏幕大小，并加载适当的CSS文件，同时考虑当前视口和当前设备的屏幕大小。非常漂亮。

结合我的回答的前面部分，我相信你会有一个很好的方式来处理你的问题。

---

下面是你可以查询的屏幕尺寸的一个例子，但你得到的想法。

  / *智能手机（纵向和横向）--------- -  * / 
 @media only screen 
 and（min-device-width：320px）
 and（max-device-width：480px）{
 / * Stylees * 
} 
 
 / *智能手机（横向）----------- * / 
 @media只有屏幕
和（min-width： 321px）{
 / * Styles * / 
} 
 
 / *智能手机（肖像）----------- * / 
 @media只有屏幕
和（max-width：320px）{
 / *样式* / 
} 
 
 / ------ * / 
 @media only screen 
 and（min-device-width：768px）
 and（max-device-width：1024px）{
 / *样式* / 
} 
 
 / * iPads（横向）----------- * / 
 @media只有屏幕
和min-device-width：768px）
 and（max-device-width：1024px）
 and（orientation：landscape）{
 / * Styles * / 
} 
 
 / * iPads（portrait）----------- * / 
 @media only screen 
 and（min-device-width：768px）
和（max-device-width：1024px）
和（orientation：portrait）{
 / *样式* / 
} 
 
 / *台式机和笔记本电脑 - --------- * / 
 @media only screen 
 and（min-width：1224px）{
 / * Styles * / 
} 
 
 / *大屏幕----------- * / 
 @media只有屏幕
和（min-width：1824px）{
 / *样式* / 
} 
 
 / * iPhone 4 ----------- * / 
 @media 
只有屏幕和（-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; 
 //或者你可以只是中心的图像，如果它大于当前的视口
 // background-position：center center; 
} 
} 
  
 Credit：大部分来自 CSS技巧 
 
I would like to have a responsive image arrangement for backgrounds on a site.  

For example, based on different screen resolutions, I would like for different background images to load.  Further it would be useful if I could define different behaviors; for example, a higher resolution desktop would have a larger stretched background image, while a netbook might have a smaller version of that shrunk to fit, or while a 3GS iPhone would have a small tiled image.

How would you implement such a scenario?
解决方案
I believe this will help you solve your problem. I came across the following library today on an unrelated Google expedition: eCSSential. It looks to be the ticket. You can use the library to detect screen sizes, and load the appropriate CSS files, taking into consideration the current viewport, and the screen size for the current device. Pretty nifty.

Combined with the previous part of my answer, I believe you will have a pretty good way of dealing with your problem.



The below is just an example of the screen sizes you can query for, but you get the idea. The background can be styled for each scenario.
/* 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 */
}
background can be styled differently for any resolution, for instance:
@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;
    }
}
Credit: Most of this from CSS Tricks

                        
这篇关于响应的背景与Twitter Bootstrap？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！