前端 CSS 面试题, 说说 px,em,rem 的区别及使用场景

Step 1

Q:: px、em、rem 的区别及使用场景是什么？

A:: px 是像素单位，表示一个固定的大小，常用于需要精准控制元素尺寸的场景；em 是相对单位，基于父元素的字体大小，通常用于文本相关的样式，以便于响应式设计；rem 也是相对单位，但基于根元素（html）的字体大小，通常用于在全局范围内保持一致的比例缩放。

Step 2

Q:: px、em、rem 的优缺点是什么？

A:: px 的优点是固定且不受其他元素影响，缺点是缺乏灵活性；em 的优点是相对灵活，可以根据父元素的大小进行调整，缺点是容易产生级联效应，导致尺寸难以预测；rem 的优点是基于根元素，方便全局控制，缺点是需要统一调整根元素的字体大小。

Step 3

Q:: 如何在响应式设计中合理使用 px、em、rem？

A:: 在响应式设计中，px 适用于边框、阴影等不需要响应的部分，em 适用于需要基于父元素大小调整的文本或布局，rem 适用于全局统一比例的布局元素，如外边距和内边距，以便在不同设备上保持一致的视觉效果。

Step 4

Q:: 浏览器默认的字体大小是多少？如何更改根元素的字体大小？

A:: 大多数浏览器的默认字体大小为16px。可以通过在 CSS 中设置 html 元素的 font-size 来更改根元素的字体大小，例如 html { font-size: 62.5%; }，这样 1rem 就等于 10px，更易于进行计算。