HTML 正文不遵守宽度或高度

Question

我正在使用 HTML 和 CSS 制作自己的作品集网站，到目前为止一切顺利。所有其他页面都有响应并且看起来不错，但有一个页面由于某种原因 HTML 正文不遵循当前屏幕的宽度，特别是宽度较低的手机。

经过测试，我意识到由于某种未知的原因，从 940px 及以下，宽度LOCKS并且不会根据屏幕变化。

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(210, 208, 208, 0.633);
  overflow-x: hidden;
  height: auto;
  width: auto;
}

.conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45svb;
  height: auto;
  margin: 30px 30px;
}

.botao_voltar {
  display: flex;
  flex-direction: inherit;
  position: fixed;
  z-index: 30;
  align-items: flex-start;
  height: 60px;
  justify-content: center;
  width: 45vmax;
  padding: 20px 20px;
  margin-top: 30px;
  background: rgba(172, 170, 170, 0.452);
  border-radius: 80px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.37);
  backdrop-filter: blur(17.5px);
}

.botao_voltar button {
  border: 0;
  border-radius: 35px;
  background-color:  #FF5F1F;
  color: white;
  font-family: 'Poppins', sans-serif;
  width: 110px;
  height: 60px;
  font-weight: 700;
  font-size: 30px; /* Cria uma responsividade legal*/
  padding: 10px 10px;
  transition: all .7s ease;
}
    
.botao_voltar button:hover {
  transform: translate3D(0,-1px,0) scale(1.20); /* move up slightly and zoom in */
  box-shadow: 8px 28px 50px rgba(39,44,49,.07), 1px 6px 12px rgba(39,44,49,.04);
  transition: all .7s ease; /* zoom in */
  cursor: pointer;
}

.corpo {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 40vmax;
  padding: 50px 50px;
  margin-top: 120px;
  background: #FF5F1F;
  border-radius: 80px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.37);
  backdrop-filter: blur(17.5px);
}

.corpo h1 {
  text-align: start;
  font-family: monospace;
  font-size: 60px;
  font-weight: 700;
  color: rgb(252, 248, 248);
  text-wrap: balance;
}

.corpo img {
  margin-top: 50px;
  width: inherit;
  border-radius: 60px;
  object-fit: cover;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.37);
  backdrop-filter: blur(17.5px);
}

.corpo p {
  text-align: justify;
  font-family: 'Corporate';
  font-size: 25px;
  line-height: 3.5rem;
  word-spacing: 0.5px;
  color: rgb(252, 248, 248);
  text-wrap: balance;
}

.copyright {
  display: flex;
  align-items: flex-end;
  font-size: 20px;
  font-family: "Corporate";
  color: black;
}

<div class="botao_voltar">
  <a href="/Projetos/index.html"><button>Voltar</button></a>
</div>
<div class="conteudo">
  <div class="corpo">
    <h1>Reconhecimento Facial Usando CNN</h1>
    <img src="https://picsum.photos/300">
    <p>
      Criei este projeto simples meramente por questões didáticas
      já que estava estudando CNN (Convulational Neural Networks).
      Basicamente eu montei um modelo do zero, não utilizei nenhuma
      arquitetura pronta, como RES-NET ou ALEX-NET, ao invés montei
      eu mesmo, de forma bem amadora mas para simplesmente entender a 
      lógica por trás do CNN.
    </p>
  </div>
</div>

<p class="copyright"> © 2024 Luiz Fernando Brasão</p>

下面是一些展示我的问题的图片：

到目前为止一切顺利

宽度无法正常工作

这里可以正常工作

Answer 1

我看到你在某些CSS的宽度中使用了“vmax”，所以当高度大于屏幕宽度时，你的布局将无法正确显示。你应该使用“vw”。

Answer 2

您需要在

meta

标签内插入以下

head

标签

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

它设置视口的宽度以匹配设备的屏幕宽度，并确保初始缩放级别为 1.0。