使用@media做移动端适配时登录页输入框按钮未占满容器如何解决

问题根源 #

1. 缺失全局box-sizing: border-box规则，元素的边框、内边距会额外叠加到设置的宽度上，你给输入框设width: 100%时，加上底部边框的宽度实际总宽度超出了父容器，所以看起来没占满。
2. 包裹输入框的自定义标签<login-input>没有设置样式，自定义元素默认是display: inline属性，无法固定宽度，子元素输入框的100%宽度没有正确的参照基准。
3. 没有清理浏览器给元素默认加的内外边距，可能挤压内部元素的可用宽度。

修复方案 #

调整你的CSS代码如下即可：

/* 全局样式重置，建议放在CSS最顶部，所有场景都生效 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (max-width:500px) {
  input {
    height: 40px;
    width: 100%;
    display: block;
    border-radius: 0;
    /* 保留你原有边框逻辑，可自行修改样式 */
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
  login-box {
    width: 90vw;
    border: 0;
    display: grid;
  }
  login-button {
    width: 100%;
    display: block;
  }
  login-box-content {
    display: grid;
    gap: 20px; /* 可自行调整间距，替代你代码里的br标签，更可控 */
  }
  /* 新增login-input样式 */
  login-input {
    display: block;
    width: 100%;
  }
}

如果修复后还有异常，可检查外层login-wrapper、all两个自定义标签的样式，确保它们为块级元素，宽度符合预期。

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