测试响应式时页面背景图过小，如何用CSS实现HTML页面响应式适配

将以下CSS代码添加到HTML的<head>标签中，用<style>标签包裹即可生效：

/* 全局样式重置，消除浏览器默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 外层容器铺满整个视口 */
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* 若使用静态背景图，添加以下4行属性解决过小问题 */
  background-image: url("替换为你的背景图地址");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 适配3D canvas背景铺满全屏 */
.webgl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* 上层文字层级高于背景，避免被遮挡 */
.title-container, .links {
  position: relative;
  z-index: 10;
}

/* 文字响应式适配，自动适配不同屏幕尺寸 */
.store-title {
  font-family: "Blippo", sans-serif;
  font-size: clamp(2rem, 8vw, 5rem);
  text-align: center;
  padding-top: 2rem;
}

.shop-link a {
  font-family: "Blippo", sans-serif;
  font-size: clamp(1.5rem, 5vw, 3rem);
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  /* 可根据设计需求自定义文字颜色 */
  color: #fff;
}

如果你的页面使用ThreeJS渲染3D背景，还需要在JS逻辑中添加窗口大小监听代码，保证3D场景同步适配窗口尺寸：

window.addEventListener('resize', () => {
  // 更新相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  // 更新渲染器尺寸和像素比，避免模糊
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

核心调整说明 #

• 静态背景图通过background-size: cover属性实现自动铺满容器，不会出现显示过小、留白、重复的问题，始终居中显示
• canvas 3D背景设置为绝对定位铺满整个视口，适配任意窗口尺寸
• 文字使用clamp()函数实现响应式字号，无需编写多套媒体查询即可在不同设备上自动适配大小
• 统一层级管理，避免上层文字内容被背景遮挡

内容的提问来源于stack exchange，提问作者K.Sharpe21