微信小程序适配

最新推荐文章于 2024-03-07 14:21:29 发布

TERMINUSL

最新推荐文章于 2024-03-07 14:21:29 发布

阅读量243

点赞数

文章标签：微信小程序前端小程序

本文链接：https://blog.csdn.net/TERMINUSL/article/details/127516287

版权

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