为何Bootstrap v3将HTML元素默认字体大小设置为10px？

First, let’s clarify a key point: Bootstrap 3 does NOT set html { font-size: 10px; } by default. Out of the box, Bootstrap 3 uses the browser’s default html font-size (usually 16px) and sets the body font-size to 14px directly or with relative units like em to maintain scalability. Rem units are used sparingly in Bootstrap 3, mostly for specific components rather than global styling.

So why is your bootstrap.css showing that 10px rule? Here are the most likely reasons:

• You used a custom Bootstrap build: Bootstrap’s official v3 customization tool let you adjust variables like $font-size-root or enable a "rem-first" setup. Setting $font-size-root to 10px was a common trick to simplify rem calculations (1rem = 10px, so 14px becomes 1.4rem, etc.), but this changes the base for all rem-dependent styles.
• You’re using a modified/third-party Bootstrap version: Some forks or pre-customized Bootstrap builds tweak the base font size to make responsive math easier.
• Accidental variable override: If you compiled Bootstrap from Sass, you might have set $font-size-root to 10px in your custom variables file before importing Bootstrap’s core styles.

Fixes to Get Your Rem-Based Content Displaying Normally #

Here are a few practical ways to resolve the tiny content issue:

1. Revert to Bootstrap’s default base font size
   If you built Bootstrap yourself, re-run the build process and reset the base font size variables to their defaults:

   • Set $font-size-root to null (to inherit the browser’s 16px)
   • Ensure $font-size-base is set to 14px (Bootstrap’s default body font size)

2. Override the html font-size in your custom CSS
   Add this rule after loading bootstrap.css (no need to recompile Bootstrap):

   html {
     font-size: 16px;
   }
   

   This resets the rem base to the browser’s default, and Bootstrap’s body font size (14px) will still work correctly since it’s not dependent on the html font-size in the default setup.

3. Adjust your rem values to match the 10px base
   If you intentionally want to keep the 10px base for easier calculations, update your custom rem values to align:

   • 14px (default body size) becomes 1.4rem
   • 16px becomes 1.6rem, etc.

Remember: Bootstrap 3 wasn’t designed to use rem as the primary unit across the board—px and em were more common for global styling. If you’re leaning heavily on rem, double-check that your custom setup aligns with Bootstrap’s intended styling patterns.

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