响应式网站移动端表单域与按钮上下多余间距如何移除

解决方法 #

• 首先排查移动端默认样式干扰：不同移动端浏览器内核会给input、button等表单元素预设默认样式，你可以先添加全局表单样式重置，清除浏览器默认属性：

input, button, select, textarea {
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  /* 移除webkit内核默认的表单外观 */
  -webkit-appearance: none;
  appearance: none;
}

• 排查rem单位适配问题：你提供的边距类全部使用rem作为单位，rem的实际像素值由html根元素的font-size决定，若移动端适配逻辑中根字体比桌面端更大，相同类名的边距在移动端会等比放大。你可以给对应元素加移动端专属的媒体查询覆盖边距：

/* 768px为移动端断点，可根据你的项目适配规则调整 */
@media screen and (max-width: 768px) {
  /* 直接指定目标元素的边距，优先级更高 */
  .你的表单元素类名, .你的按钮类名 {
    margin: 0 !important;
  }
  /* 也可以统一调整移动端下所有my-*类的边距大小 */
  .my-1 {
    margin: 0.5rem 0;
  }
  .my-2 {
    margin: 1rem 0;
  }
  /* 按需调整其余my-*类的数值即可 */
}

• 确认页面头部已添加正确的视口配置，避免移动端自动缩放页面产生的布局错位：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 若以上方法都无法解决，可打开浏览器调试工具的设备仿真模式，选中目标元素查看盒模型属性，直接定位空白是来自margin、padding、行高还是默认边框，针对性修改即可。

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