如果要使用MediaQuery，则必须有选择地对应用了不同图像的DOM元素进行dis和启用。
相反，我建议对同一元素有条件地应用不同的图像，即<body> 并将条件保持在JS内。
wp_localize_script 能够向脚本传递多个参数。我要说的是，传递几种图像大小，如下所示：
$script_parameters = array(
\'small\' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(150, 150)),
\'medium\' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(250, 250)),
\'large\' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(350, 350))
);
wp_localize_script(
\'backstretch-set\',
\'BackStretchImages\',
$script_parameters
);
然后根据屏幕/视口宽度的条件展开JS：
jQuery(document).ready(function($) {
var viewportWidth = $(window).width();
// same as "document.documentElement.clientWidth" (vanilla JS)
if ( 768 > viewportWidth ) {
$("body").backstretch([BackStretchImages.small[0]],{duration:3000,fade:750});
} else if ( 1024 > viewportWidth ) {
$("body").backstretch([BackStretchImages.medium[0]],{duration:3000,fade:750});
} else {
$("body").backstretch([BackStretchImages.large[0]],{duration:3000,fade:750});
}
});
可以根据需要添加任意多个大小，并根据需要调整视口边界。
