我正在一个Wordpress网站上工作，我有一个背景图像作为我的徽标，我的实际标题图像是透明的。我正在使用以下代码来调整移动设备的背景图像大小：
@media (max-width: 767px){
body.custom-background {
background-image: url(http://gleefulthings.com/WPtestblog/wp-content/uploads/2018/06/backgroundlogo2.jpg);
background-position: 50% top;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 70% auto;
}
}
我遇到的问题是它在平板电脑上看起来不错，但在手机上太小了。我希望它只在手机上更宽，下面有一堆空白。我认为空间可能与我的标题图像也需要调整大小有关。
有没有办法也调整透明标题图像的大小，但只能在手机上，而不是平板电脑上？有没有办法在手机和平板电脑上以不同的方式调整此背景图像的大小？该代码将其设置为 70%，这在平板电脑上很棒，但我更喜欢在手机上更大。
如果需要，您可以在此处查看我的网站。这是我第一次使用移动布局。任何帮助将不胜感激！:)
如果删除该行：
background-size: 70% auto;
它在所有尺寸的屏幕上对我来说看起来都很好。
是70% 正在缩小该图像 - 使用屏幕宽度的 70% 显示。该行：
background-position: 50% top;
使图像居中并位于页面顶部。当您删除background-size图像时，图像仍保持全尺寸和居中，我认为这在移动设备上看起来不错。它只是开始剪裁图像的两侧，但徽标的文本不受影响。
为了防止徽标被剪裁，我们需要更多的思考。在 640px 的宽度和使用 70% 规则时，背景图像在 450px 处几乎完全完整。所以我们需要两个规则：
@media only screen and (max-width: 640px) {
body.custom-background {
background-size: auto;
}
}
@media only screen and (max-width: 450px) {
body.custom-background {
background-size: 100% auto;
}
}
这意味着，在 450px 到 640px 之间，背景将以原始大小 - 450px 显示。然后，当屏幕小于 450px 时，它被包含，因此缩小到 100% 的屏幕宽度。现在，在那些较小的屏幕上，背景图像要么是原始图像大小，要么是屏幕的整个宽度 - 它将不再被切断。
@media (最大宽度： 480px({ 在此处添加适用于手机的 CSS }
您网站上的图片将在宽度低于 420px 时更改。因此，将此规则添加到背景图像中可能是个好主意。
@media (max-width: 420px)
body.custom-background {
background-size: 100% auto;
}