前端经典面试题合集, CSS 有哪些常用单位?这些单位各有什么区别?
前端经典面试题合集, CSS 有哪些常用单位?这些单位各有什么区别?
QA
Step 1
Q:: CSS 有哪些常用单位？这些单位各有什么区别？
A:: CSS 中常用的单位包括：
1. 绝对单位：
- px (像素)：固定大小，常用于精确定位和固定尺寸。
- cm (厘米)、mm (毫米)、in (英寸)：用于打印或特定情况下的精确测量。
2. 相对单位：
- % (百分比)：相对于父元素的尺寸，常用于响应式设计。
- em：相对于当前元素的字体大小，常用于设置相对字体大小和间距。
- rem：相对于根元素 (html) 的字体大小，适合全局一致的尺寸控制。
- vh、vw：分别相对于视窗高度和宽度的 1%，用于全屏布局。
- vmin、vmax：相对于视窗较小或较大的维度的 1%，适用于响应式设计。
Step 2
Q:: px 和 em 的区别是什么？在什么情况下使用它们？
A:: px 是绝对单位，表示屏幕上的固定像素数，不会随用户设置或设备不同而变化。em 是相对单位，表示相对于父元素的字体大小，允许根据父元素的字体大小动态调整。使用 px 时，适合需要精确控制的布局，如图标和细节定位；使用 em 时，适合需要相对调整的布局，如文字和响应式设计。
Step 3
Q:: rem 单位的优势是什么？如何使用？
A:: rem 单位相对于根元素 (html) 的字体大小，这意味着整个页面的尺寸可以通过修改根元素的字体大小统一控制。其优势在于能够实现全局一致性和更好的可维护性。在设置全局样式和响应式设计时尤其有用，例如：
html { font-size: 16px; }
body { margin: 2rem; }
Step 4
Q:: viewport 单位 (vh、vw) 在响应式设计中的作用是什么？
A:: viewport 单位 (vh、vw) 是相对于视窗高度和宽度的 1%，适用于全屏布局和响应式设计。它们能够根据视窗的大小动态调整元素的尺寸，确保布局在不同设备上都能适应。例如：
.full-height { height: 100vh; }
.full-width { width: 100vw; }
Step 5
Q:: 如何选择合适的 CSS 单位？
A:: 选择合适的 CSS 单位取决于具体需求：
- 绝对单位 (px) 适合精确定位和固定尺寸。
- 相对单位 (%、em、rem) 适合响应式设计和相对调整。
- viewport 单位 (vh、vw) 适合全屏布局和动态调整。综合考虑页面的整体设计和不同设备的兼容性。