一、rem 在本项目中的使用说明
1. rem 的作用与项目应用场景
rem（root em）是 CSS 的一种相对单位，基于根元素（html）的 font-size 进行缩放。它常用于响应式布局，能让页面在不同屏幕下自适应缩放，提升移动端体验。
在本项目（如 web-company、web-admin），rem 可用于页面整体布局、字体、间距等的自适应。例如在 src/styles/index.scss 或 theme.css 中设置全局 rem 基准。
2. rem 的常见用法
（1）设置根元素 font-size（适配方案）
在 web-company/src/styles/index.scss 里：
html {
font-size: 16px; /* PC端基准 */
}
@media (max-width: 600px) {
html {
font-size: 12px; /* 移动端缩小基准 */
}
}
（2）页面样式用 rem 单位
body {
font-size: 1rem;
margin: 0.5rem 1rem;
}
.button {
padding: 0.5rem 1.5rem;
border-radius: 0.25rem;
}
（3）JS 动态设置根 font-size（适配多端）
可在 main.ts 或单独的 rem.js 里动态设置：
function setRemBase() {
const base = Math.max(document.documentElement.clientWidth / 10, 12);
document.documentElement.style.fontSize = base + 'px';
}
window.addEventListener('resize', setRemBase);
setRemBase();
二、问题
1. 问：rem 和 em 有什么区别？为什么项目中选择 rem？
答：
em 是相对于父元素 font-size 的单位，嵌套多时计算复杂；rem 是相对于根元素（html）的 font-size，计算简单、全局统一。项目中采用 rem 作为主单位，方便实现响应式布局和多端适配，维护更高效。
2. 问：你在项目中是如何设置 rem 基准的？如何适配不同屏幕？
答：
我在 src/styles/index.scss 里设置了 html 的 font-size，PC 端为 16px，移动端通过媒体查询或 JS 动态调整为 12px 或按屏宽自适应。这样所有 rem 单位的样式都会随屏幕缩放，保证了页面在不同设备下的良好显示效果。
3. 问：rem 单位在项目中主要用在哪些地方？实际效果如何？
答：
rem 主要用于页面的字体、间距、按钮、容器宽高等。比如按钮的 padding、字体大小都用 rem 单位，保证了在 PC 和移动端都能自适应缩放。实际效果是页面在不同分辨率下都能保持良好的比例和可读性。
4. 问：如何用 JS 动态设置 rem 基准？项目中有用到吗？
答：
可以通过 JS 监听窗口 resize，根据屏幕宽度动态设置 html 的 font-size，实现更精细的适配。项目中在移动端页面用 JS 动态设置 rem 基准，保证了在不同手机、平板下的自适应体验。
5. 问：rem 布局在实际开发中遇到过哪些问题？你是如何解决的？
答：
实际开发中，部分三方组件或图片未用 rem 单位，导致缩放不一致。为此，我会统一重置样式，或用 CSS 覆盖第三方组件的 px 单位为 rem。同时，注意 rem 基准不能设置过小，避免字体过小影响可读性。通过这些措施，保证了项目整体的响应式体验。
