移动端前端综合面试题（含详细接地气答案）.docxVIP

移动端前端综合面试题（含详细接地气答案）

一、移动端基础核心题（高频必问）

1、移动端适配的常用方案有哪些？各自的优缺点和适用场景？

参考答案：

我日常开发主要用三种适配方案，没有绝对最好的，都是根据项目场景选。

第一是viewport固定适配，也就是设置initial-scale、width=device-width。优点是最简单、零成本，适合简单活动页、H5临时页面；缺点是适配精度差，大屏小屏字体、间距会偏差，不能做精细化布局。

第二是rem适配，也是传统移动端主流方案。原理是根据屏幕宽度动态设置html根字体大小，页面所有尺寸用rem写。优点是适配所有安卓、iOS机型，兼容性无敌，老项目基本都是这套；缺点是需要配置js动态计算，而且字体用rem会跟随屏幕缩放，部分设计细节不好把控，多屏适配需要微调。

第三是vw/vh适配，我现在新项目基本都用这个。vw是视口宽度百分比，100vw就是整屏宽度，不用写JS，纯CSS就能搞定适配，代码更简洁，适配精度高。缺点是低版本安卓机型有少量兼容问题，而且100vh会包含手机状态栏、导航栏，容易出现页面高度塌陷，需要单独处理。

补充：现在企业主流方案是vw适配+设计稿预设，配合postcss自动转换，不用手动算尺寸，开发效率最高。

2、移动端1px细线问题怎么解决？原理是什么？

参考答案：

这个问题是移动端开发最常见的坑，核心原因是设备