桌面端登录表单响应式问题求助（附代码与仓库）

针对你遇到的桌面端响应式问题，结合提供的代码和参考信息，给出几个实用的排查和修复方向：

1. 修正网格布局的偏移问题 #

当前 .login__content 同时设置了 justify-content: center 和 margin-left: 10rem，这会让本应居中的网格内容额外向左偏移，直接导致布局偏离预期。建议移除该固定 margin，或者根据设计需求调整为相对单位：

.login__content {
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  align-items: center;
  /* 移除或调整固定偏移值 */
  /* margin-left: 10rem; */
}

2. 替换固定尺寸为自适应属性 #

.login__img 使用了固定宽高（600px/588px），在刚好达到1024px断点的屏幕上，很容易超出容器范围导致布局错乱。建议改用自适应属性，让容器适配不同屏幕宽度：

.login__img {
  display: flex;
  max-width: 600px;
  width: 90%; /* 基于父容器宽度自适应 */
  max-height: 588px;
  height: auto;
  background-color: var(--first-color-lighten);
  border-radius: 1rem;
  padding-left: 1rem;
}

3. 优化绝对定位元素的偏移逻辑 #

.login__register 和 .login__create 使用固定的 left: -11rem 偏移，在不同宽度的桌面屏幕上位置会混乱。可以改为基于父容器的相对百分比偏移，或者直接将这些元素纳入网格布局，避免依赖绝对定位：

.login__register,
.login__create {
  /* left: -11rem; 替换为相对偏移 */
  left: -8%; /* 基于父容器宽度的百分比 */
}

4. 检查基础样式的覆盖情况 #

确认桌面端媒体查询中的样式是否完全覆盖了移动端的基础样式，比如 .login__content 的默认网格列数、容器的 overflow 属性等，避免基础样式和媒体查询样式冲突。

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