为什么屏幕宽度低于 300px 时图像尺寸不减小？

Question

我的这个网页在桌面上看起来不错，但无法正确适应移动电话等较小的设备。我什至尝试在 CSS 中对 width 属性使用“clamp”，但无济于事。它仍然会溢出到屏幕的右侧，并且元素不会像应有的那样保持居中。

下面是代码：

:root {
  --main-color: #087830;
  --secondary-color: #e7ffdb;
  --dark-color: #444;
  --light-color: #fafafa
}

body {
  font-family: Quicksand, sans-serif;
  background: radial-gradient(var(--light-color), var(--light-color), var(--secondary-color));
  background-repeat: no-repeat;
  color: var(--dark-color);
  text-shadow: 0 0 2px var(--light-color);
  margin: 0;
  padding: 0 1em;
  display: grid;
  place-items: center;
  font-size: 20px;
  overflow-x: hidden;
  word-wrap: break-word
}

a {
  text-decoration: none
}

input {
  box-sizing: border-box
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Eczar, serif;
  font-weight: 700;
  margin: 0
}

h2 {
  color: var(--main-color)
}

section {
  border-bottom: 2px solid #b6fd92;
  width: 100%
}

.full-height {
  min-height: 100vh
}

.image-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  text-shadow: 0 0 20px var(--dark-color)
}

.cta-button {
  background: var(--main-color);
  color: var(--light-color);
  text-shadow: none;
  border: 2px solid var(--main-color);
  border-radius: 2em;
  padding: 10px 1em;
  font-weight: 700
}

.cta-button:hover {
  background: var(--light-color);
  color: var(--main-color);
  transition-duration: .4s
}

.navbar {
  height: 100px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between
}

.navbar div {
  display: flex;
  align-items: center
}

.nav-title {
  height: 100%;
  gap: 10px
}

.navbar img {
  height: 70%
}

.nav-toggle,
.nav-toggle-label {
  position: fixed;
  right: -100vh;
  top: 0;
  height: 80px;
  width: 110px;
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  opacity: 0;
  color: var(--main-color);
  font-weight: 700
}

.website-title {
  max-width: 200px
}

.nav-toggle {
  z-index: 3
}

.nav-toggle-label {
  z-index: 2
}

.navbar a {
  text-decoration: none;
  color: var(--dark-color);
  margin: 0 5px;
  border-radius: 1em;
  padding: .5em 15px
}

.navbar a:hover {
  background: var(--light-color);
  color: var(--main-color);
  box-shadow: 0 0 5px var(--light-color);
  transition-duration: .4s
}

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 2em;
  gap: 50px
}

.hero div {
  max-width: 500px
}

.hero h2 {
  font-size: 3em;
  line-height: 1em
}

.hero img {
  width: 100%
}

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

  .nav-toggle,
  .nav-toggle-label {
    right: 10px;
    top: 10px
  }

  .nav-toggle-label {
    opacity: 1
  }

  .nav-toggle:checked~.navlinks {
    right: 0;
    transition-duration: .4s
  }

  .nav-toggle:checked~.nav-toggle-label {
    color: var(--light-color);
    text-shadow: none
  }

  .navlinks {
    position: fixed;
    top: 0;
    right: -200px;
    height: 100vh;
    width: 200px;
    background: var(--main-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1
  }

  .navlinks a {
    color: var(--light-color)
  }
}

<section class="full-height">
  <nav class="navbar">
    <div class="nav-title">
      <img src="logo.svg" alt="Logo">
      <img class="website-title" src="website-title.svg" alt="Website Title">
    </div>
    <input type="checkbox" class="nav-toggle">
    <span class="nav-toggle-label">Menu</span>
    <div class="navlinks">
      <a aria-current="page" class="" href="/">Home</a>
      <a aria-current="page" class="" href="/">Link 2</a>
      <a aria-current="page" class="" href="/">Link 3</a>
      <a aria-current="page" class="" href="/">Link 4</a>
      <a aria-current="page" class="" href="/">Login</a>
    </div>
  </nav>
  <div class="hero">
    <div>
      <h2>Catchy Line</h2>
      <p>Description bla bla bla bla bla bla bla bla bla bla bla</p>
      <br>
      <a aria-current="page" class="cta-button" href="/">CTA Button</a>
    </div>
    <div>
      <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="hero">
    </div>
  </div>
</section>

如何让我的代码响应式？

Answer 1

要使您的图像“响应式”（意味着它们不会溢出您的屏幕/主体），请尝试在您的图像类中添加 max-width: 95% 之类的内容。

您还可以设置 div 的background-url 并操作您的 div 使其不大于屏幕。

Answer 2

正如 Sev 所提到的，阻止图像缩小的是其他内容的宽度。我不会为此费心调整它，我认为这些天没有人使用宽度小于 300 像素的手机。