Javascript JQuery试图使Wordpress的屏幕尺寸依赖功能

Question

我有一点让标题出现在悬停叠加上。

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $('.et_pb_filterable_portfolio .et_pb_portfolio_item').each(function() {
                var title = $(this).find('h2');
                p = $(this).find('p');
                $(title).appendTo($(this).find('.et_portfolio_image .et_overlay'));
                $(p).appendTo($(this).find('.et_portfolio_image .et_overlay'));
            });
        });
    })(jQuery);
</script>

但是它不检查屏幕尺寸。我只需要在台式机上执行此操作，就无法解决。我一直在尝试合并这部分，但是显然我做错了。

function myFunction(x) {
    if (x.matches) { 
    }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes