2

window.matchMedia 正在工作，但我认为它会像使用“@media only screen and”一样工作，当屏幕变窄时会发生这种情况。例如，如果您使用的是桌面浏览器，则必须使用 window.matchMedia 加载或刷新屏幕。有没有办法让 window.matchMedia 像 @media CSS 一样工作，当您增加或减少屏幕宽度时它会自动发生，而无需刷新或（重新）加载屏幕？

以下示例用于：Americastributetoparis.com

jQuery(document).ready(function($) {

if (window.matchMedia("(max-width: 800px)").matches) {
    // phone
    $(".front-page-1").backstretch(["/wp-content/themes/digital-pro/images/americas-tribute-to-paris-mobile.png"]);

} else {

    //tab or desktop
    $(".front-page-1").backstretch([BackStretchImg.src]);

}

});

4

1 回答 1

1

发现这个在搜索引擎上研究我的问题并应用它： 媒体查询不仅在运行时，而且在窗口状态发生任何变化时

jQuery(document).ready(function($) {

var mql = window.matchMedia("(max-width: 800px)")

mediaqueryresponse(mql) // call listener function explicitly at run time

mql.addListener(mediaqueryresponse) // attach listener function to listen in on state changes

function mediaqueryresponse(mql){
     if (mql.matches){ // if media query matches

      // phone
        $(".front-page-1").backstretch(["/wp-content/themes/digital-pro/images/americas-tribute-to-paris-mobile.png"]);

    } else {

      //tab or desktop
        $(".front-page-1").backstretch([BackStretchImg.src]);

     }
}

});

于 2016-03-21T20:02:55.763 回答