一、 em 单位
em 是相对长度单位，它的值取决于父元素的字体大小。如果父元素的字体大小为 16px，那么 1em 就等于 16px。
优势：
- 响应式设计友好：当父元素的字体大小改变时，使用 em 单位设置的字体大小也会相应地缩放。这使得网页在不同设备和屏幕尺寸上都能保持良好的排版效果，非常适合响应式设计。例如，在一个移动端布局中，如果父元素的字体大小根据屏幕宽度进行调整，那么使用 em 单位的子元素字体大小也会自动适应，无需单独为每个设备设置不同的字体大小。
- 便于整体排版调整：在需要对整个网页的字体大小进行统一调整时，使用 em 单位非常方便。只需要修改根元素（通常是 元素）的字体大小，其他使用 em 单位设置的字体大小都会按照比例进行缩放。这样可以快速地对整个网页的字体风格进行调整，而不会影响到布局的其他方面。
劣势：
- 计算相对复杂：相对于像素等固定单位，使用 em 单位需要考虑父元素的字体大小，计算相对较为复杂。特别是在多层嵌套的元素中，要准确计算子元素的字体大小可能需要进行多次换算，这增加了开发的难度和出错的概率。
- 兼容性问题：在一些较老的浏览器中，对 em 单位的支持可能不够完善，可能会导致字体大小显示不一致的问题。在进行网页开发时，需要进行兼容性测试，以确保在各种浏览器中都能正常显示。
二、 rem 单位
rem 也是相对长度单位，它的基准是根元素（ 元素）的字体大小。无论在文档的何处使用 rem 单位，其相对于根元素的字体大小进行计算。
优势：
- 更清晰的层级关系：由于 rem 单位始终以根元素为基准，在多层嵌套的布局中，能够更清晰地控制字体大小的层级关系。避免了在使用 em 单位时可能出现的字体大小计算混乱的情况，使代码结构更加清晰易懂。
- 较好的兼容性：相比 em 单位，rem 单位在现代浏览器中的支持更好，兼容性问题相对较少。这使得在开发过程中可以更放心地使用 rem 单位，减少了兼容性测试的工作量。
劣势：
- 缺乏灵活性（在某些情况下）：如果网页的字体大小需要根据不同的部分或元素进行单独调整，使用 rem 单位可能会不够灵活。因为它始终以根元素为基准，无法直接针对某个特定的父元素进行字体大小的调整。
三、百分比（%）单位
百分比单位是基于父元素的字体大小进行计算的，类似于 em 单位，但更侧重于相对比例。
优势：
- 比例关系明确：使用百分比单位可以很方便地设置字体大小的比例关系。例如，设置一个子元素的字体大小为父元素的 80%，那么在任何情况下，子元素的字体大小都将是父元素字体大小的 80%，保持了良好的比例一致性。
- 适用于一些特定布局：在一些特定的布局中，如导航栏、侧边栏等，使用百分比单位可以根据父元素的大小自动调整字体大小，使布局更加灵活。
劣势：
- 计算相对复杂：与 em 单位类似，使用百分比单位也需要考虑父元素的字体大小，计算相对较为复杂。特别是在多层嵌套的布局中，要准确计算字体大小可能需要进行多次换算。
- 可能导致字体大小波动：如果父元素的字体大小发生变化，使用百分比单位设置的子元素字体大小也会相应地变化。但在某些情况下，这种变化可能会导致字体大小的波动，影响用户体验。例如，在一个滚动条滚动时，父元素的字体大小可能会因为布局的调整而发生变化，从而导致子元素的字体大小也随之变化，可能会让用户感到不适。
综上所述，em、rem 和百分比单位都有各自的优劣，在实际的网页开发中，可以根据具体的需求和场景选择合适的单位。如果需要进行响应式设计并且注重整体排版的调整，em 单位是一个不错的选择；如果希望更清晰地控制字体大小的层级关系并且兼容性较好，rem 单位是一个较好的选项；而如果需要设置字体大小的比例关系并且适用于一些特定布局，百分比单位则可以发挥其优势。在大多数情况下，也可以结合使用这些单位，以达到更好的排版效果。
浙公网安备 33059102000262号