我的网页没有响应[关闭]答案

【问题标题】：My webpage is not acting responsively [closed]我的网页没有响应[关闭]
【发布时间】：2016-03-26 12:51:41
【问题描述】：

此代码是一个简单的背景图片，但通过移动浏览器查看时显示 3 张图片

body {
background-image: url('image-1.jpg');
width: 500px;
height: 600px;
position: relative;
-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

@media only screen and (max-width: 767px) {
  body {
    background-image: url('image-2.jpg');
  }
}

请建议更改以使图像适合屏幕

【问题讨论】：

不清楚你想要达到什么目的。无论如何，如果您希望网页具有响应性 - 不要以像素为单位设置 width 和 height。顺便说一句，我只能在您的代码中看到 3 张图片中的 2 张。请改写您的问题。

标签： css web responsive-design visual-web-developer

【解决方案1】：

只需像这样修改您的代码：

@media only screen and (max-width: 767px) {
  body {
    background-image: url('image-2.jpg');
    background-size: cover;
  }
}

它会再次起作用。

【讨论】：

【解决方案2】：

您的 css 只会更改身体的背景图像，我认为这不是您正在寻求的行为。为了获得更好的响应式设计，您需要以百分比形式设置身体尺寸，例如 width:100vw; height:100vh;，这可能会为您提供所需的行为。

【讨论】：

是的，这就是我正在寻找的适用于所有屏幕尺寸的东西吗？
添加这将使您的“主体”占据屏幕的全尺寸，这将允许您的代码在所有屏幕尺寸上运行。如果您想使用全新的图像作为不同屏幕尺寸的背景，您可以使用@media 标签。