Actually the javascript resize event you have to focus on a lot of things such as: clientWidth, clientHeight, innerWidth, innerHeight, outerWidth, outerHeight, offsetWidth and/or offsetHeight properties.
And for media queries, it applies when the certain condition is true, not only this, it has many more benefits which you can find over here.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Also they are totally different, resize is a DOM event occurred when the viewport was resized. In Media Queries there are much more properties, than those connected to the viewport size. You can control the layout by the media, import style rules etc.
CSS load faster than Javascript.. javascript will work when the html is rendered.. if you load javascript before the html or the particular html tag is rendered it will not work. Thus media query is better option. P.S its time to change your senior way of using resize function.. :)
Edited
I can think of three important concerns here:
JavaScript support - onresize wouldn't fire at all if client disables JS in his browser. Nowadays it is almost impossible to surf the web with disabled JS, but still a valid concern.
Animations - if you plan to animate transition from one window size to the other, then CSS animations are the way to go, especially on mobile devices. CSS animations use hardware acceleration when available and thus are very fast and efficient, consuming less CPU and run more smoothly.
You could still use onresize to trigger CSS animations from JS (add a class, change an animated CSS property), but consider 3.
DOM traversal - either your JS code, either browser internally, in order to manipulate DOM one has to travers it.
CSS properties are applied to DOM elements by traversing the DOM and matching elements according to CSS selectors. This process is constantly optimized by browser vendors and made as efficient as possible. Of course it also depends on how you write your CSS, but browser optimizes you selectors internaly once and apply them many times.
On the other hand JS also has to traverse DOM in order to do any manipulation. But with JS it is up to you how efficient is your DOM traversal (document.all, document.getElementById, document.querySelector etc).
I would use media queries whenever possible and CSS animations triggered either by media query rule, either by other JS event.
