如何动态调整中心Div及其所有内容的尺寸？实现中心蓝色Div自适应屏幕边缘并缩放内部元素

嘿，这个需求完全可以用纯CSS搞定，根本不需要JavaScript！我帮你调整一下代码，让蓝色div铺满屏幕边缘，同时所有元素的相对大小在任何设备上都保持一致。

修改后的CSS代码 #

/* 重置body默认边距，确保蓝色div能触碰到屏幕边缘 */
body {
  margin: 0;
  font: normal 2vw verdana, arial, sans-serif;
  background-position: top;
  min-height: 100vh; /* 确保背景铺满整个视口高度 */
}

html {
  min-height: 100vh;
}

h1 {
  text-align: center;
  font-size: 8vw; /* 用视口宽度单位，保持字体相对大小 */
}

p {
  text-align: center;
}

h2 {
  text-align: center;
  font-size: 5vw;
}

iframe {
  display: block;
  border-style: none;
  width: 90%; /* 占父容器90%宽度 */
  aspect-ratio: 350/500; /* 维持原iframe的宽高比 */
  margin: 0 auto; /* 让iframe居中 */
}

/* 蓝色容器铺满屏幕，内边距用相对单位 */
.test {
  width: 100vw;
  border: 2px solid black;
  padding: 4vw;
  background-color: #9FE7FF;
  box-sizing: border-box; /* 确保padding不会撑开容器宽度 */
}

.email-part {
  font-weight: bold;
}

修改后的HTML代码 #

<!DOCTYPE html> <!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
<!-- 添加视口元标签，确保移动端自适应 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body background='images/background.png'>
<div class="test">
<h1>DuelCraft</h1>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center">
  <!-- 移除iframe的width和height属性，由CSS控制 -->
  <iframe src="https://discord.com/widget?id=995858337293926400&amp;theme=dark" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
</div>
<div class="email-part">
<p>Email user@example.com for help!</p>
</div>
</div>
<p> ©2022 DuelCraft </p>
</body>
</html>

关键修改说明 #

• 全屏蓝色容器：给body去掉默认margin，.test设置width:100vw（占满视口宽度），同时用box-sizing:border-box确保内边距不会超出屏幕。
• 自适应字体：所有字体大小改用vw（视口宽度）单位，这样字体大小会随屏幕宽度等比例缩放，保持相对大小一致。
• Discord iframe自适应：用aspect-ratio属性维持原有的宽高比（350:500），宽度设为父容器的90%，确保在不同屏幕上都能保持正确的比例且居中显示。
• 移动端适配：添加了视口元标签<meta name="viewport" content="width=device-width, initial-scale=1.0">，确保移动端浏览器能正确识别屏幕宽度。

内容的提问来源于stack exchange，提问作者ICE_Plane