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

【问题标题】：Use multiple matchMedia() with SVG for responsive viewBox resizing将多个 matchMedia() 与 SVG 一起用于响应式 viewBox 调整大小
【发布时间】：2017-10-14 01:30:21
【问题描述】：

我正在尝试使用 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");
        }
    }

}

【问题讨论】：

标签： javascript svg responsive-design

【解决方案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");
    }
}

【讨论】：