我正在使用 HTML 和 CSS 制作自己的作品集，到目前为止一切顺利。所有其他页面都是响应式的并且看起来不错，但是有一个页面，天知道为什么，由于某种原因，HTML 正文不遵守当前屏幕的宽度，特别是宽度较低的手机。
经过一些测试后，我意识到由于某种未知的原因，从 940 px 及以下，宽度LOCKS，并且不会根据屏幕变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/Projetos/reconhecimento_facial/styles.css"/>
</head>
<body>
<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="fdd_1.PNG">
<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>
</body>
</html>
@font-face {
font-family: "Corporate";
src: url('/CorporateS-Regular.otf');
}
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;
}
/*animação do botão*/
.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;
}
您需要在
metahead<meta name="viewport" content="width=device-width, initial-scale=1.0" />
它设置视口的宽度以匹配设备的屏幕宽度，并确保初始缩放级别为 1.0。
我看到你在某些CSS的宽度中使用了“vmax”，所以当高度大于屏幕宽度时，你的布局将无法正确显示。你应该使用“vw”。