《前端面试题 - 移动端适配》

一、移动端适配

1.Flexible 方案

Flexible 是淘宝推出的一个用于移动端适配的解决方案。其核心原理是：

// 核心代码
function setRem() {
    // 通常设计稿是750px
    const baseSize = 75;  // 基准值 750/10
    const scale = document.documentElement.clientWidth / 750;
    document.documentElement.style.fontSize = (baseSize * scale) + 'px';
}

// 初始化
setRem();
// 窗口变化时重新设置
window.addEventListener('resize', setRem);

2. rem 适配方案

rem 是相对于根元素（html）的 font-size 来计算的单位。

// 示例：设计稿上元素宽度为200px
.box {
    // 假设html的font-size为75px
    width: 2.667rem;  // 200/75
    height: 1.333rem; // 100/75
}

3. vw/vh 方案

viewport 相对单位，更现代的解决方案：

• vw: viewport width 的 1/100
• vh: viewport height 的 1/100

.container {
    // 在750px设计稿下，100px转换为 (100/750*100)vw
    width: 13.333vw;  
    font-size: 4vw;
}

4. rpx（小程序专属单位）

rpx 是微信小程序中的响应式单位： -规定屏幕宽度为 750rpx -可以根据屏幕宽度自动转换

// 小程序内部转换逻辑（简化版）
const rpxRatio = windowWidth / 750;  // 屏幕宽度/750得到转换比例
const px = rpx * rpxRatio;  // rpx转换为px

/* 在750px设计稿中 */
.box {
    width: 100rpx;  /* 直接使用设计稿的px值 */
    height: 100rpx;
}

实际使用建议

1.现代项目推荐使用 vw 方案：

// 可以使用 postcss-px-to-viewport 自动转换
.container {
    width: 100px;  // 自动转换为 13.333vw
    font-size: 16px;  // 自动转换为 2.133vw
}

2.需要兼容老浏览器可以选择rem方案:

// 结合 postcss-pxtorem 使用
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 75,
            propList: ['*']
        }
    }
}

3.小程序项目直接使用 rpx

.btn {
    width: 200rpx;
    height: 80rpx;
}

4.混合开发可以组合使用

.hybrid-container {
    // 主要使用vw
    width: 100vw;
    // 部分场景使用rem
    font-size: 1rem;
    // 固定单位场景使用px
    border: 1px solid #ccc;
}

这些方案各有优劣，需要根据具体项目需求（兼容性要求、开发效率、团队熟悉度等）来选择合适的方案