js实现自适应屏幕

function adjustElements() {
    const width = window.innerWidth;
    const elements = document.querySelectorAll('.responsive-element');

    elements.forEach(element => {
        if (width < 600) {
            element.style.fontSize = '14px';
        } else if (width < 900) {
            element.style.fontSize = '18px';
        } else {
            element.style.fontSize = '22px';
        }
    });
}

window.addEventListener('resize', adjustElements);
window.addEventListener('load', adjustElements);

function applyDeviceStyles() {
    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    const body = document.body;

    if (isMobile) {
        body.classList.add('mobile');
    } else {
        body.classList.add('desktop');
    }
}

applyDeviceStyles();

:root {
    --background-color: white;
}

body.mobile {
    --background-color: lightblue;
}

function setResponsiveBackgroundColor() {
    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    const body = document.body;

    if (isMobile) {
        body.style.setProperty('--background-color', 'lightblue');
    } else {
        body.style.setProperty('--background-color', 'white');
    }
}

setResponsiveBackgroundColor();