微信小程序适配

最新推荐文章于 2025-07-30 09:21:24 发布

原创最新推荐文章于 2025-07-30 09:21:24 发布 · 382 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #前端 #小程序

博客介绍了微信小程序的适配方案，包括通过viewport适配、rem适配，其中rem适配可通过js实现，还可借助第三方库lib-flexible+px2rem-loader来完成。

1、通过viewport适配

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

2、rem适配

通过js实现：

function remRefresh(){
    let clientWidth=document.documentElement.clientWidth;
    //将屏幕分成10份
    let rem=clientWidth/10;
    document.documentElement.style.fontSize=rem+'px';
    document.body.style.fontSize='12px';
}

window.addEventListener('pageshow',()=>{
    remRefresh()
})

//防抖函数
let timeoutId;
window.addEventListener('resize',()=>{
    timeoutId && clearTimeout(timeoutId);
    timeoutId=setTimeout(()=>{
        remRefresh()
    },300)
})

3、通过第三方库实现

lib-flexible+px2rem-loader