javascript - 将多个 matchMedia() 与 SVG 一起用于响应式 viewBox 大小调整

Question

我正在尝试使用 matchMedia() JavaScript Web API 在 SVG 上创建媒体查询效果。我让它与单个媒体查询一起工作，但是它之前编写的方式(写出具有不同名称的函数)不能很好地扩展。我试过了，但我无法让它工作——我错过了什么？

// media query event handler
if (matchMedia) {

    var bg1 = document.getElementById("bg1-mbl");
    console.log(bg1) // returns expected SVG

    var mqls = [ // list of window.matchMedia() queries
        window.matchMedia("(min-width: 400px) and (max-width: 600px)"),
        window.matchMedia("(min-width: 600px) and (max-width: 800px)"),
        window.matchMedia("(min-windth: 800px) and (max-width: 1000px)")
    ]

    for (var i=0; i < mqls.length; i++){ // loop through queries
        mqls[i].addListener(widthChange) // call handler function whenever the media query is triggered
        widthChange(mqls[i]) // call handler function explicitly at run time
    }

    // media query change
    function widthChange(mql) {
        if (mqls[0].matches) {
            console.log(mqls[0]) // returns expected
            console.log("This is bg1: " + bg1) // returns "This is bg1: [object SVGSVGElement]""
            bg1.setAttribute("viewBox", "0 150 375 580");
        }
        if (mqls[1].matches) {
            console.log(mqls[1])
            bg1.setAttribute("viewBox", "0 400 375 580");
        }
        if (mqls[2].matches) {
            console.log(mqls[3])
            bg1.setAttribute("viewBox", "0 800 375 580");
        }
        else {
            // set to default viewBox values
            bg1.setAttribute("viewBox", "0 0 375 580");
        }
    }

}

Answer 1

想通了!需要将if改为else if。完整解决方案:

// RESPONSIVE SVG

/* ==================================================== */
/* BG1 */
var bg1 = document.getElementById('bg1-mbl'); // grab svg element

// media query event handler
if (matchMedia) {
    var mqls = [ // array of media queries
        window.matchMedia("(min-width: 400px) and (max-width: 600px)"),
        window.matchMedia("(min-width: 600px) and (max-width: 800px)"),
        window.matchMedia("(min-width: 800px) and (max-width: 1000px)")
    ]

    for (i=0; i < mqls.length; i++) { // loop though media queries
        mqls[i].addListener(WidthChange); // listen for queries
        WidthChange(mqls[i]); // call handler func at runtime
    }
}

// media query change
function WidthChange(mql) {

    /* For testing - xml elment to string
    var XMLS = new XMLSerializer(); 
    var bg1XML = XMLS.serializeToString(bg1);
    */

    if (mqls[0].matches) { 
        bg1.setAttribute("viewBox", "0 150 375 580");
    }
    else if (mqls[1].matches) {
        bg1.setAttribute("viewBox", "0 300 375 580");
    }
    else if (mqls[2].matches) {
        bg1.setAttribute("viewBox", "0 400 375 580");
    }
    else {
        // set default
        bg1.setAttribute("viewBox", "0 0 375 580");
    }
}