how to use media queries with javascript in my web parts – classic mode

I have a site that is using the pnp responsive and the webparts are responsive. But i’m using a jquery (easypaginate.js) in the webpart.

When i resize my webpart how can i dynamically change the step option to show only 3 li items when i resize the screen to let say 500px using (media queries) @media (max-width: 500px)

Below is the default setting options

$  ('ul#items').easyPaginate({         step:7,         nextprev:false,         numeric:true     });  } 

I want the step to be 3 when i go on a smaller screen. Thanks in Advance