移除Bootstrap CSS后viewport单位尺寸异常的原因与解决

Bootstrap CSS添加的关键全局样式 #

移除Bootstrap后布局混乱，核心是它默认加了两个影响全局布局的基础重置样式：

• 全局盒模型设置：给所有元素（包括伪元素）设box-sizing: border-box，让元素的内边距、边框都包含在设定的宽高内，不会额外撑开元素尺寸。浏览器默认是content-box，此时内边距会让元素实际宽高超过设定值。
• 清除body默认边距：把浏览器默认给body加的margin: 8px重置为margin: 0，消除全局默认的外边距。

这两个样式是之前布局正常的关键——你的.App-body设了padding:1.3%和height:100vh，如果没有border-box，内边距会让元素实际高度超过视口；如果保留body默认margin，页面整体会多出边距，导致滚动条。

手动恢复样式的代码 #

不需要引入整个Bootstrap，只需在你的全局CSS（比如App.css最顶部）添加以下代码：

/* 全局盒模型重置，对齐Bootstrap的行为 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 清除body默认边距 */
body {
  margin: 0;
}

添加后，元素的100vh计算、内边距处理都会和之前引入Bootstrap时一致，滚动条和vmin字体异常的问题就能解决。

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