如何根据屏幕尺寸更改背景图像，可能使用Bootstrap [英] How to change background image based on screen size, possibly with Bootstrap

问题描述

我在CSS中的body上有一个background-image:url.问题是当我过渡到屏幕变为纵向方向的移动设备时.我希望使用不同的纵向肖像背景.在我看来，以人为本"实际上只是转化为移动设备，而不是ipad/平板电脑.手机的长度和宽度之间的差异更加极端，因此在这种情况下，我想链接其他网址.

I have an background-image:url on my body in CSS. The problem is when I transition into mobile devices where the screen becomes portrait orientated. I have a different portrait orientated background I wish to use. Mainly, "portrait-orientated" in my case really just translates to mobile devices, not so much ipads/tablets. Mobiles are much more extreme with the difference between length and width so I want to link a different url in this case.

Idk，如果我有什么办法可以使用Bootstrap的.hidden-xs/.visible-xs完成此操作，那只是我的想法，但如果有人有解决方案，我会很高兴听到.这也将有所帮助，因为我使用的是Bootstrap的导航栏，当xs时，导航栏变为触摸屏导航栏，这意味着<768px，所以我只想在导航栏更改时更改背景图像.

Idk if there's any way I could use Bootstrap's .hidden-xs/.visible-xs to accomplish this, that's just me thinking out loud, but if someone has a solution using this I'd be more than happy to hear it. This also would help since I'm using Bootstrap's navbar which changes into a touchscreen navbar when xs, meaning <768px, So I'd like to only change the background image when the navbar changes.

有什么想法吗?在这一点上，我是一个新手，这是我的第一个实际项目，而不仅仅是孤立的片段.对于Java而言，这可能是一些东西，但对于idk.我很乐意提供任何帮助.

So any ideas? I'm a total newbie at this point, this is my first real project that isn't just isolated snippets. This might be something for Java but idk. I'd love any and all help.

还有一个快速的半相关问题，我该如何处理background-position: center (-50px from the top).我应该只拍摄我要使用的图片，然后在上面用油漆添加50px的空白或其他内容，然后上传该空白吗?还是将其设置为CSS的方法?

Also a quick semi-related question, how do I handle background-position: center (-50px from the top). Should I just take the picture I want to use and add 50px of whitespace on top with paint or whatever then upload that? Or is the a way to set this is CSS?

推荐答案

使用@media查询编写特定于窗口大小的CSS.示例:

Use @media queries to write window size specific css. Example:

@media (min-width: 400px) {
    .element {
        background: #cccccc;
    }
}

@media (min-width: 500px) {
    .element {
        background: #888888;
    }
}

@media (min-width: 600px) {
    .element {
        background: #222222;
    }
}

这里是小提琴: http://jsfiddle.net/zhqn1vhh/

这篇关于如何根据屏幕尺寸更改背景图像，可能使用Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！