Breakpoint für mobile menu mit jQuery ?

Guten Tag, auf meiner Seite wird das Menü mit einer jQuery(function($) aufgerufen. Ich möchte vorher abfragen, ob: @media only screen and ( max-width: 768px ) > dann soll eine andere funktion aufgerufen werden. Wie kann ich das schreiben ?
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>offsetWidth offsetHeight</h3>
<p id="w"></p>
<p id="h"></p>
<hr>
<h3>screen.availHeight screen.availWidth</h3>
<p id="aw"></p>
<p id="ah"></p>
<hr>
<h3>clientX clientY</h3>
<p id="mw"></p>
<p id="mh"></p>
<hr>
<h3>pageX pageY</h3>
<p id="pw"></p>
<p id="ph"></p>
<script>
$(window).ready(function() {
var sio=$('#slide-in-open');
var simc=$('.slide-in-menu-container');
if($(window).width()<=768){
sio.addClass('open');
simc.addClass('slide-in-menu');
}else{}
sio.click(function(){
sio.toggleClass('open');
simc.toggleClass('slide-in-menu');
});
});
window.addEventListener('resize',re)
function re(){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX