PC端页面适配

页面使用px为单位,正常写
引入js即可自动调整

const baseWidth = 1920; //设计稿的宽
const baseHeight = 1080;  //设计稿的高
let timer = null;
let calcScale = function () {
    let windowInnerWidth = window.innerWidth;
    let windowInnerHeight = window.innerHeight;
    // let ratioW = baseWidth / windowInnerWidth;
    let ratioW = windowInnerWidth / baseWidth;
    // let ratioH = baseHeight / windowInnerHeight;
    let ratioH = windowInnerHeight / baseHeight;
    document.body.style.width = baseWidth + 'px';
    document.body.style.height = baseHeight + 'px';
    document.body.style.transformOrigin = 'left top';
    document.body.style.transform = `scale(${ratioW})`;
}
calcScale();
window.onresize = function () {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(calcScale, 300)
}

以上是控制屏幕缩放扩展,页面不发生变化

(补充2021-12-29)下面链接文章是vue框架下的页面适配PC端,使用插件,rem单位
https://blog.csdn.net/weixin_41257563/article/details/97266234

你可能感兴趣的:(javascript,html,css)