This isn't used as often with resize events, but it's worth being aware of. It 'throttles' how often the code is called. throttle will only execute your resize code every X number of milliseconds.It's good for updating graphs, charts and layouts that may be expensive to update every single resize event. This is ideal when you only want to call your resize code once, after the user is done resizing the browser. debounce will only execute your resize code X number of milliseconds after the LAST resize event.To limit how often your resize code is called, you can use the debounce or throttle methods from the underscore & lodash libraries. The resize code gets called a LOT when the user is resizing the browser manually, and can feel pretty janky. This is the first problem you'll notice when binding to resize. How do I stop my resize code from executing so often!? * default styles applied first screen and (min-height: 820px) /* height >= 820 px */ (css if your best bet if you're just stylizing things on resize (media queries))

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

Jquery on resize refresh