如何实现React.js页面响应式？使用Argon Creative Tim与ReactStrap移动端适配异常

API 探路者

2026-10-6

问题原因

核心问题是登录卡片容器设置了固定宽度450px，在宽度小于450px的移动设备上会横向溢出，同时固定高度也会导致小屏设备内容被裁切，视觉上表现为背景/图片适配异常
CSS中.outer类重复设置了overflow属性，同时缺少适配小屏的响应式规则
背景图片未设置尺寸适配属性，无法跟随屏幕尺寸自动缩放

修复方案

首先检查项目入口HTML的head标签中是否添加了响应式必备的viewport元标签，没有的话补上：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

修改login.jsx中inner容器的行内样式，删掉固定宽高设置，换成适配响应式的属性：
把原有代码：

<div className="inner" style={{ width: "450px", height: "450px", marginBottom:"80px" }}>

替换为：

<div className="inner" style={{ maxWidth: "450px", width: "90%", minHeight: "450px", marginBottom:"80px" }}>

修改Login.css中的对应规则：
首先调整.inner类的宽度规则，新增小屏适配媒体查询：

.inner {
  /* 删掉原来的width:450px声明 */
  width: 100%;
  max-width: 450px;
  margin: auto;
  background: #ffffff;
  box-shadow: 0px 14px 80px rgb(34 35 58 / 20%);
  padding: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all 0.3s;
}
/* 新增小屏适配规则 */
@media (max-width: 576px) {
  .inner {
    padding: 30px 20px;
  }
  .form-group label {
    letter-spacing: 0.1em;
  }
}

然后修复.outer类的重复属性，补充背景适配规则：

.outer {
  height: 100vh;
  background-position: center;
  background-size: cover; /* 背景图片响应式适配 */
  overflow: hidden; /* 删掉重复的overflow:scroll声明 */
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}