如何使用 CSS 使背景图像响应式？

Question

我正在为我的网页制作常见问题解答部分，但我无法使其后台响应。它在不同的屏幕尺寸上调整得不好。

html {
  height: 100vh;
  width: 100vw;
}

body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-image: url('https://wallpapers.com/images/featured/1920-x-1080-night-city-y13hx1qucv0ztepv.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

h2 {
  text-align: center;
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.container {
  min-height: 40%;
  max-width: 60%;
  border: 1px solid black;
  border-radius: 3%;
  background-color: white;
  padding: 0 10px 10px 10px;
}

.question {
  font-size: 1.1rem;
  padding: 0 0 15px 0;
  border-bottom: 2px solid black;
  cursor: pointer;
}

.question::after {
  content: "+";
  font-size: 1.4rem;
  position: absolute;
  right: 10px;
}

.answer {
  overflow: hidden;
  height: 0;
  transition: all 0.5s ease-in;
}

.question-container.active .answer {
  height: 40px;
}

.question-container.active .question {
  font-size: 1rem;
  transition: all 0.5s ease-in;
}

.question-container .active .question::after {
  content: "-";
  transition: all 0.5s ease-in;
}

<div class="container">
  <h2>Frequently Asked Questions</h2>
  <div class="question-container">
    <p class="question">What is the return policy?</p>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam porro quidem eum praesentium officia voluptas repellendus amet minima alias voluptates beatae ea non, natus numquam sint, nam quasi aspernatur aliquam.</p>
  </div>
  <div class="question-container">
    <p class="question">When will I receive my order?</p>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam porro quidem eum praesentium officia voluptas repellendus amet minima alias voluptates beatae ea non, natus numquam sint, nam quasi aspernatur aliquam.</p>
  </div>
  <div class="question-container">
    <p class="question">Where are you located?</p>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam porro quidem eum praesentium officia voluptas repellendus amet minima alias voluptates beatae ea non, natus numquam sint, nam quasi aspernatur aliquam.</p>
  </div>
</div>

问题：

常见问题解答部分背景没有响应。

• 我尝试过使用最大宽度、最小高度和百分比，但是 布局在不同的屏幕尺寸上仍然无法正确调整。
• 内容在较小的屏幕上要么溢出，要么看起来太局促。

我尝试过的：

• 对容器使用最大宽度和最小高度。

• 将宽度和高度设置为百分比。

• 添加媒体查询以调整不同屏幕尺寸的样式。

期望的结果： 我希望常见问题解答部分能够完全响应，在各种屏幕尺寸上平滑调整，而不会溢出或狭窄的内容。

任何人都可以帮我找出为什么我的 UI 背景没有响应并提出改进建议吗？

以下是他们在不同屏幕尺寸（分别为1440px、1024px、425px）下的屏幕截图

Answer 1

看起来您缺少

viewport

元标记，例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />

这只是一个示例（由于可访问性问题，

user-scalable=no

可能会被忽略）。您的代码片段没有此行为的原因是 Stack Overflow 将元标记本身添加到代码片段页面以保持其缩放一致。