Question

我一直在我的投资组合网站上工作（在www.imkev.in查看），我在使用移动版时遇到了一些问题。我的CSS中有媒体查询，应该在低于530pxs的任何屏幕宽度下切换到较低的文件大小和不同的裁剪图像。页面的其他元素（我的多列布局切换到单个列布局）应该类似地切换到较低屏幕宽度的不同页面布局，他们这样做，所以我知道我的基本媒体查询正在工作。但是，背景图像元素不会。它们保留在较大的文件上，不会缩小图像以适合浏览器窗口。同样，我在实际的移动设备上只有这个问题。

当我将桌面上的浏览器窗口大小减小到530px以下时，它将切换到备用图像和我能够在线查找的移动设备模拟器（Chrome开发人员工具和其他基于浏览器的模拟器）似乎都是像他们应该的那样工作。

这是我正在使用的CSS：

.portfolio-background {
   background: url(/assets/images/background1-small.jpg) fixed;
   background-size: cover;

   @media (min-width: 530px) {
   .portfolio-background {
        background: url(/assets/images/background1.jpg) fixed;
        background-size: 100% 100%; 
    }
}

我还尝试将背景大小调整为较小的媒体查询上的“覆盖”，结果相同。我也在我的html文件的顶部有这个，它应该将浏览器窗口的宽度设置为正在使用的设备的宽度：

<meta name="viewport" content="width=device-width, initial-scale=1">

有什么建议吗？

编辑：我正在使用编译器，我最初在编译器完成它之前给出了代码。我已调整帖子以显示实际的代码输出。仍在努力解决问题

Answer 1

请考虑以下链接：https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width

您使用的是错误的媒体查询。而是将min更改为max。这意味着最大宽度是指定的宽度。因此，每个宽度小于或等于530px的决定将使用您指定的样式。

Answer 2

这必须是：

即。首先是常规规则，然后是媒体查询，里面相同的选择器，其规则包含那些与常规规则不同的参数。

Answer 3

background-size: cover;

应该是：

background-size: 100% 100%;

Answer 4

背景图片在您的网站上正确交换，我认为问题在于，由于移动背景的大小和格式以及CSS规则，您没有看到所需的结果。

您网站上的代码与您发布的代码略有不同，因此我将以此为例。

首先，针对您的移动背景尝试类似的内容：

import math
import numpy
import perfplot


def for_sum(a):
    sum = 0.0
    for i in range(len(a)):
        sum += a[i]
    return sum


perfplot.show(
        setup=numpy.random.rand,
        kernels=[for_sum, numpy.sum, sum, math.fsum],
        labels=['for-sum', 'numpy.sum', 'sum', 'math.fsum'],
        n_range=[2**k for k in range(15)],
        xlabel='len(a)',
        logx=True,
        logy=True
        )

我认为你会发现它接近你所追求的目标，但它在某些视口中并没有足够低。第二点的解决方案是准备另一个更高的背景图像。

更新

似乎必须有更好的方法来涵盖所有潜力屏幕尺寸比为所有屏幕尺寸设置不同的背景图像。如何获得适用于移动设备的自适应背景图像？

移动设备上的背景可能很棘手，因为元素的格式可能会从桌面上的格式发生根本变化。

尝试准备移动背景图片，使其比例与您想要在移动设备上覆盖的元素的比例相似
除了您的背景图片，有时您还可以使用背景颜色。
如果您的某些背景图片无法显示，那么使用background-position可以提供很多帮助。例如，如果感兴趣的中心位于图像的中间，那么像下面这样的CSS会将背景图像置于元素中间的中心

body {
   background: url(/assets/images/background1-small.jpg) fixed;
   background-size: 100% auto;  
   background-repeat: no-repeat;
}

祝你好运！

背景图像不切换到移动设备上的替代图像

4 个答案: