twitter-bootstrap 使用 Twitter Bootstrap 的响应式背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13018000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive backgrounds with Twitter Bootstrap?
提问by ylluminate
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.
例如，基于不同的屏幕分辨率，我希望加载不同的背景图像。此外，如果我可以定义不同的行为会很有用；例如，一个更高分辨率的桌面会有一个更大的拉伸背景图像，而上网本可能有一个缩小到适合的较小版本，或者 3GS iPhone 会有一个小的平铺图像。
How would you implement such a scenario?
您将如何实现这样的场景？
回答by apttap
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.
我相信这会帮助你解决你的问题。我今天在一次无关的 Google 探险中遇到了以下库：eCSSential。好像是票。您可以使用该库来检测屏幕尺寸，并加载适当的 CSS 文件，同时考虑当前视口和当前设备的屏幕尺寸。很漂亮。
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
信用：大部分来自CSS Tricks
回答by Scott Hillson
You can invest in a little jquery to change your backgrounds based on the screen size. Here is an example of what you can do:
你可以投资一个小 jquery 来根据屏幕大小改变你的背景。以下是您可以执行的操作的示例：
if ( $(window).width() < 1000 ) {
$('body').css('background','url("yourimage")';
} else {
$('body').css('background','url("yourimage")';
}
Would you mind telling us what you've tried if you have a moment?
如果你有时间，你介意告诉我们你尝试过什么吗？
回答by Scott Hillson
A few methods are discussed in this article. The last method may be exactly what you are looking for. It includes a JavaScript function for checking window size and setting the background.
本文讨论了几种方法。最后一种方法可能正是您正在寻找的方法。它包括一个用于检查窗口大小和设置背景的 JavaScript 函数。
回答by robabby
You could use the CSS3 Full Page Background Image explained over here on CSS-Tricks, and then go with a jQuery Fallback if necessary. There's a good article for the jQuery method over on Gaya Design Blog
您可以使用 CSS3 整页背景图像在CSS-Tricks上的解释，然后在必要时使用 jQuery Fallback。Gaya 设计博客上有一篇关于 jQuery 方法的好文章
CSS:
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;
}
using the @mediaquery method specified by @apttap along with this CSS snippet you could use multiple background images per device pixel ratio.
使用@media@apttap 指定的查询方法以及此 CSS 代码段，您可以为每个设备像素比率使用多个背景图像。
