百分比布局在不同屏幕下宽度计算不一致怎么办？

端木一涵提问于 2026-03-26 23:38:22 阅读 7

移动

我在做移动端页面时用百分比布局，明明设了 width: 50%，但在某些手机上显示的宽度却不是预期的一半，感觉跟父容器的 padding 或者 viewport 有关系，但又说不清楚具体原因。

我试过给 html 和 body 加 box-sizing: border-box，也检查了 meta viewport 设置没问题，但还是会出现偏差。下面是我的 CSS：

.container {
  width: 100%;
  padding: 0 16px;
}
.item {
  width: 50%;
  background-color: #eee;
}

难道是 padding 导致父容器实际内容区域变小了？那百分比到底是基于哪个宽度算的？

我来解答赞 2 收藏

反馈

1 条解答

Top丶春景 Lv1

百分比是基于包含padding的父容器宽度算的，所以padding影响了计算。给.container加box-sizing:border-box就行，已经用了但可能没生效，检查选择器优先级或者直接用 .container { box-sizing: border-box !important; } 搞定。

2026-03-27 00:00