做大屏时动态根元素的尺寸

最新推荐文章于 2023-04-21 16:37:00 发布

AliceFsl

最新推荐文章于 2023-04-21 16:37:00 发布

阅读量92

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_35522511/article/details/126602864

版权

缩放比

let designWidth = 1920;
let designHeight = 1080;
// 缩放比
export function scale() {
    let scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designWidth / designHeight ? document.documentElement.clientWidth / designWidth : document.documentElement.clientHeight / designHeight;
    return scale;
}

等比计算根元素尺寸

let designWidth = 1920;
let designHeight = 1080;
// 缩放比
function setFontSize() {
    var fontSize = document.documentElement.clientWidth / document.documentElement.clientHeight < designWidth / designHeight ? (document.documentElement.clientWidth / designWidth) * 100 : (document.documentElement.clientHeight / designHeight) * 100
    document.querySelector('html').style.fontSize = fontSize + 'px';
}

// 应用
function App() {
    setFontSize()
    const canDebounce = debounce(setFontSize, 100)
    window.addEventListener('resize', canDebounce)
    return () => {
        window.removeEventListener('resize', canDebounce)
    }
}
App();