Question

首先，我想说的是，我已经尽我所能在本网站和其他网站上找到的所有内容，但对于我正在做的事情来说，简单的做法是行不通的。我设置了背景

drawVillage(/** @type {Village} */ (item));
updateVillage(/** @type {Village} */ (item));

，并且想使其响应（针对移动设备进行了优化），我发现一件事奏效了，但是却弄乱了台式机的体验（我尝试使用@media标签指定分辨率，但没有执行任何操作）。

有帮助吗？

编辑：您可以在https://github.com/t0091/t0091.github.io/tree/master/home上查看GitHub存储库。

Answer 1

由于您已通过css将图像保留为背景，因此无法对它应用任何引导响应类。

您可以做的是对背景图像具有多种分辨率，并将小的res图像放入媒体查询中，如下所示：

@media screen and (max-width: 800px) {
header.masthead {
    text-align: center;
    color: white;
    width: 100%;
    position: relative;
    background: url("smallresimage.png") center center no-repeat; /*put small res image here*/
    background-size: cover;
    background-attachment: scroll;
}

Answer 2

使用

@media only screen and (max-width: 1000px) {

}

然后将仅移动设备放进去，或者将其切换到最小宽度：1000px，然后将非移动设备放进去。

如何使背景图片（CSS）响应？

2 个答案: