如何修复网站列布局无侧边距的显示异常问题

问题根因 #

• 你的.row左右边距规则仅写在了视口宽度≤1000px的媒体查询中，宽度超过1000px的设备上没有生效，导致内容直接贴浏览器两侧边缘
• .row未设置最大宽度限制，宽屏设备下内容会铺满整个屏幕，没有两侧的留白区域

修复代码 #

替换原有.row相关CSS代码即可：

#moto {
  font-size: 48px;
  font-weight: 300;
  color: #484848;
  margin: 60px 0;
  letter-spacing: 0.8px;
}

#moto span {
  color: #FF5A5F !important;
  font-weight: 700;
}

.row {
  position: relative;
  max-height: 970px;
  height: auto;
  margin: 0 auto;
  background-color: yellow;
  /* 全设备通用左右内边距 */
  padding: 0 24px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* 宽屏最大宽度限制，可根据你的设计需求调整数值 */
  max-width: 1200px;
}

@media all and (max-width: 1000px) {
  .row {
    /* 小屏缩小左右边距 */
    padding: 0 15px;
  }
}

生效说明 #

修改后所有尺寸的设备都会展示对应的左右边距，宽度超过1200px的设备上内容会居中显示，两侧自动留出空白区域，完全匹配预期效果。

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