移动端前端面试题及详细答案（实战真实版）.docxVIP

移动端前端面试题及详细答案（实战真实版）

一、移动端适配核心问题

1、讲一下移动端适配的常用方案，各自优缺点？

日常项目中我主要用viewport适配、rem适配、vw/vh适配、弹性布局四种方案，不同场景分开使用。

（1）固定viewportpx适配

通过meta标签固定视口宽度为设备宽度，设置initial-scale=1，页面直接写px，适合简单活动页、展示页。

优点：代码简单、无需插件、调试方便。

缺点：不同尺寸手机会有细微缩放差异，大屏手机页面元素偏小，适配精度一般。

（2）rem适配（主流传统方案）

原理是根据设备屏幕宽度动态设置html根字体大小，页面所有尺寸用rem单位，实现等比缩放。一般配合postcss-px2rem自动转换px为rem。

优点：兼容性极好，兼容所有移动端机型，包括老旧安卓机，适配稳定性高，企业项目用得最多。

缺点：需要配置构建工具，依赖根字体设置，需要处理字体不跟随缩放、1px边框问题，多了一层计算逻辑。

（3）vw/vh适配（目前首选）

vw是视口宽度百分比，1vw等于屏幕宽度的1%，直接用vw做尺寸单位，无需JS动态计算。

优点：纯CSS实现、无JS依赖、配置简单、适配精准，大屏小屏比例统一。

缺点：极低版本安卓存在兼容问题，现在基本可以忽略；单独用vh会受状态栏、导航栏影响，需要做兼容处理。

（4）flex+百分比适配

布局用fl