Best practice is to add to the resize event, rather than replace it:

window.addEventListener('resize', function(event) {
    ...
}, true);

An alternative is to make a single handler for the DOM event (but can only have one), eg.

window.onresize = function(event) {
    ...
};

jQuery may do some work to ensure that the resize event gets fired consistently in all browsers, but I'm not sure if any of the browsers differ, but I'd encourage you to test in Firefox, Safari, and IE.

Here's an example using jQuery, javascript and css to handle resize events.

css

.footer 
{
    /* default styles applied first */
}

@media screen and (min-height: 820px) /* height >= 820 px */
{
    .footer {
        position: absolute;
        bottom: 3px;
        left: 0px;
        /* more styles */
    }
}

javascript

window.onresize = function() {
    if (window.innerHeight >= 820) { /* ... */ }
    if (window.innerWidth <= 1280) {  /* ... */ }
}

jQuery

$(window).on('resize', function(){
    var win = $(this); //this = window
    if (win.height() >= 820) { /* ... */ }
    if (win.width() >= 1280) { /* ... */ }
});

How do I stop my resize code from executing so often!?

This is the first problem you'll notice when binding to resize. The resize code gets called a LOT when the user is resizing the browser manually, and can feel pretty janky.

To limit how often your resize code is called, you can use the debounce or throttle methods from the underscore & lodash libraries.

• debounce will only execute your resize code X number of milliseconds after the LAST resize event. This is ideal when you only want to call your resize code once, after the user is done resizing the browser. It's good for updating graphs, charts and layouts that may be expensive to update every single resize event.
• throttle will only execute your resize code every X number of milliseconds. It "throttles" how often the code is called. This isn't used as often with resize events, but it's worth being aware of.

If you don't have underscore or lodash, you can implement a similar solution yourself: JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

You can first determine a definite size.

var size = [window.width,window.height];  //public variable

Then do this:

$(window).resize(function(){
    window.resizeTo(size[0],size[1]);
});

Demo: http://jsfiddle.net/DerekL/xeway917/

Q: Won't this cause an infinite loop of resizing? - user1147171

Nice question. This will not cause an infinite loop of resizing. The W3C specification states that resize event must be dispatched only when a document view has been resized. When the resizeTo function try to execute the second time, the window will have the exact same dimension as it just set, and thus the browser will not fire the resize event because the dimensions have not been changed.

Put this code inside your Vue component:

created() {
  window.addEventListener("resize", this.myEventHandler);
},
destroyed() {
  window.removeEventListener("resize", this.myEventHandler);
},
methods: {
  myEventHandler(e) {
    // your code for handling resize...
  }
}

This will register your Vue method on component creation, trigger myEventHandler when the browser window is resized, and free up memory once your component is destroyed.

The answer is that you catch the event in Javascript, and then call a Blazor method through JS Interop.

However, I strongly recommend you NOT handle events that could fire very frequently, like mouse position changes or window size changes, with constant calls back to Blazor. Handle those using pure Javascript, and call a Blazor method after some sensible completion-- the mouse button has been released, or a certain delay time has passed, etc.

This is especially true in server flavor, and with insidious consequences. You could have a site that works fine in development, but fails horribly when deployed, do to the higher latency of a distant server.