移动前端开发面试题及详细答案.docxVIP

移动前端开发面试题及详细答案.docx

移动前端开发面试题及详细答案

一、基础必考题（考察基本功，高频出现）

1.请说说移动端适配的常用方案，各自的优缺点是什么？实际项目中你用的哪种？

答案：移动端适配核心是解决“不同设备屏幕尺寸、像素密度不一致”的问题，常用3种方案，实际项目中我主要用rem+flex组合，具体如下：

1.rem适配（最常用）：以根元素html的font-size为基准，通过js动态计算根字体大小（根据屏幕宽度），页面所有元素尺寸用rem表示。

优点：适配灵活，一套代码能兼容大部分手机屏幕，开发成本适中；缺点：需要额外写js计算根字体，且部分老机型（如iOS8以下）对rem支持不够完美，需做兼容处理。

2.vw/vh适配：将屏幕宽高均分为100份，1vw=屏幕宽度的1%，1vh=屏幕高度的1%，直接用vw/vh定义元素尺寸。

优点：无需js干预，原生支持，适配简单；缺点：兼容性不如rem（iOS9+、Android7+支持），且当屏幕宽高比差异过大（如手机和平板）时，元素比例容易变形，适合简单页面。

3.媒体查询（mediaquery）适配：针对不同屏幕宽度写不同的CSS样式，比如针对375px、414px等常见宽度单独定义样式。

优点：针对性强，适配精准，无需js；缺点：代码冗余，屏幕尺寸过多时，维护成本高，适合页面结构简单、适配机型较少的场景。