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

想出来！需要将body更改为if。完整的解决方案：

else if

将多个matchMedia（）与SVG一起使用，以响应viewBox的大小调整

1 个答案: