JSはメディアクエリを実現します

973 ワード

    //       
    let mql = [
        window.matchMedia('(max-width: 1280px)'),
        window.matchMedia('(max-width: 1366px)'),
        window.matchMedia('(max-width: 1580px)')
    ]
    //       
    function mediaMatchs () {
        let html = document.getElementsByTagName('html')[0]
        if (mql[0].matches) {
            html.style.fontSize = '16px'
        } else if (mql[1].matches) {
            html.style.fontSize = '18px'
        } else if (mql[2].matches) {
            html.style.fontSize = '20px'
        } else {
            html.style.fontSize = '22px'
        }
    }
    //          
    mediaMatchs()
    //           ,            
    for (var i = 0; i < mql.length; i++) {
        mql[i].addListener(mediaMatchs)
    }
参考:MDNドキュメントmatchMedia