如何让卡片在桌面视图下不自动缩放（无需设置固定宽度）

你的核心问题在于卡片没有宽度限制，加上绝对定位破坏了flex布局的居中逻辑，导致桌面端卡片被过度拉伸。以下是无需设置固定宽度的移动端优先解决方案：

关键修改点 #

• 移除卡片的绝对定位，让body的flex居中正常工作
• 给卡片设置max-width限制最大宽度，同时用width: 100%保证移动端占满可用空间
• 给body添加min-height: 100vh，确保页面垂直居中生效

修改后的完整代码 #

CSS #

body {
  background-color: hsl(212, 45%, 89%);
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-inline: 1rem;
  min-height: 100vh; /* 确保页面高度足够，实现垂直居中 */
  margin: 0; /* 去掉默认边距 */
}

img {
  width: 100%;
  border-radius: .75rem;
}

h1 {
  color: hsl(218, 44%, 22%);
  font-size: 1.25rem; /* 适配卡片尺寸的字体大小 */
  margin: 0;
}

p {
  color: hsl(220, 15%, 55%);
  font-size: 0.9375rem; /* 移动端友好的字体大小 */
  margin: 0;
}

#qr_card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 调整间距更紧凑 */
  padding: 1rem;
  background-color: hsl(0 0% 100%);
  border-radius: 1rem;
  width: 100%; /* 移动端占满可用宽度 */
  max-width: 320px; /* 限制桌面端最大宽度，避免拉伸变形 */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* 可选：添加阴影增强层次感 */
}

#card_description {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  padding: 0 0.5rem; /* 左右内边距避免文字贴边 */
}

HTML #

<body>
  <div id="qr_card">
    <img src="images/image-qr-code.png" alt="扫描二维码访问Frontend Mentor提升前端技能" />
    <section id="card_description">
      <h1>Improve your front-end skills by building projects</h1>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </section>
  </div>
</body>

原理说明 #

• width: 100%让卡片在屏幕宽度小于320px时，自动填满body的padding范围内的空间
• max-width: 320px确保屏幕宽度超过320px时，卡片不再放大，保持设计的固定比例
• 移除绝对定位后，body的min-height: 100vh配合flex布局，能完美实现卡片在视口中垂直水平居中
• 调整字体大小和间距，让卡片内容在小屏和大屏下都保持良好的阅读体验

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