js+场景自适应屏幕大小

/* 默认样式 */
body {
    font-size: 16px;
}

/* 小屏幕设备 */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
    .container {
        width: 100%;
    }
}

/* 大屏幕设备 */
@media (min-width: 1200px) {
    body {
        font-size: 18px;
    }
    .container {
        width: 80%;
        margin: 0 auto;
    }
}

window.addEventListener('resize', function() {
    const width = window.innerWidth;
    const container = document.querySelector('.container');

    if (width < 600) {
        container.style.width = '100%';
    } else if (width >= 600 && width < 1200) {
        container.style.width = '90%';
    } else {
        container.style.width = '80%';
    }
});

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

window.addEventListener('resize', throttle(function() {
    // 调整布局的代码
}, 100));