html5字体em

什么是em单位？

em是CSS中的一种相对长度单位，表示当前元素字体大小的倍数。font-size: 2em; 表示当前元素字体大小为其父元素字体大小的2倍。

em与px的区别

em的计算规则

1. 默认基准：浏览器默认字体大小为16px（可通过html { font-size: 16px; }修改）。
2. 逐层继承：
   • 如果父元素font-size: 16px，则1em = 16px。
   • 如果子元素font-size: 1.5em，则实际大小为16px 1.5 = 24px。
3. 嵌套计算：

   <div style="font-size: 16px"> <!-1em = 16px -->
     <p style="font-size: 2em"> <!-2em = 32px -->
       <span style="font-size: 0.5em"> <!-0.5em = 16px (继承自段落) -->
         文本
       </span>
     </p>
   </div>

em的常见用途

1. 响应式设计：
   通过em实现元素尺寸与字体比例的动态关联，

   .button {
     font-size: 1em; / 随父元素变化 /
     padding: 0.8em 1.2em; / 高度和宽度随字体缩放 /
   }

2. 组件化开发：
   在弹窗、导航栏等组件中，用em保证内部元素与根元素的比例一致。

   

3. 无障碍设计：
   用户调整浏览器字体大小时，em单位的元素会同步缩放，提升可读性。

em的潜在问题

1. 嵌套层级过深：
   多层em继承可能导致计算复杂（如父元素1em → 子元素1.5em → 孙元素2em需逐层相乘）。

2. 解决方案：

   • 使用rem（相对于根元素html的字体大小）替代。
   • 固定html的font-size并配合媒体查询调整。

相关问题与解答

问题1：em和rem有什么区别？

解答：

• em是相对于父元素的字体大小，而rem是相对于根元素（html）的字体大小。
• 若html { font-size: 16px; }，则1rem = 16px，且所有rem单位均基于此值，不受父元素影响。

问题2：为什么有时用em会导致布局错乱？

解答：

• 当元素嵌套过深或多次使用em时，字体大小可能因链式计算产生非预期值（如8em 0.9em = 0.72em）。
• 建议在复杂布局中优先使用rem或固定px值，仅在需要响应式比例