前端进阶题【面试题】- 持续更新

1. H5 移动端适配问题如何解决

（1）媒体查询

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

（2）弹性布局

（3）图片响应式

<picture><source srcset="image-large.jpg" media="(min-width: 800px)"><!-- 屏幕宽度≥800px 时生效 --><source srcset="image-medium.jpg" media="(min-width: 400px)"><!-- 屏幕宽度≥400px 时生效 --><img src="image-small.jpg" alt="Responsive Image">  <!--  fallback 兜底标签，当所有 <source> 都不匹配时，加载这张图片（如 image-small.jpg），同时保证图片的可访问性（alt 属性）--> 
</picture>

（4）rem

html {font-size: 16px;
}/* 响应式改变基础 font-size 规则 */
@media (min-width: 768px) and (max-width: 1024px) {html {font-size: 18px;}
}.header {font-size: 1rem; /* 大家告诉我 1rem 此时等于多少 *//* 屏幕尺寸在768-1024之间  1rem=18px *//* 屏幕尺寸在768-1024之外  1rem=16px */
}

实际开发中，可借助 SCSS 函数自动换算（避免手动计算），示例

// 定义换算函数（基准值默认 16px）
@function px2rem($px, $base: 16) {@return $px / $base + rem;
}// 使用：直接传 px 值，自动转 rem
.element {width: px2rem(20); // 输出 1.25rem
}@media (min-width: 768px) and (max-width: 1024px) {.element {width: px2rem(20, 18); // 输出 ~1.111rem}
}

（5）em

html {font-size: 16px;
}/* 响应式改变基础 font-size 规则 */
@media (min-width: 768px) and (max-width: 1024px) {html {font-size: 18px;}
}.header {font-size: 0.8em; /* 大家告诉我 0.8em 此时等于多少 *//* 屏幕尺寸在768-1024之间  0.8em = 0.8 * 18px = 14.4px  *//* 屏幕尺寸在768-1024之外  0.8em = 0.8 * 16px = 12.8px   */
}

2. 如何修改第三方 npm 包

patch 方案

patch-package

步骤 1：安装依赖
npm install patch-package --save-dev

步骤 2：自动化配置

{"scripts": {"postinstall": "patch-package" // npm/yarn 安装依赖后自动运行}
}

步骤 3：创建补丁
npx patch-package rspack@1.0.0