Over riding JavaScript defined properties using media queries

Question

I set the height and width of a DIV by calculating window.height and window.width properties and then assigning the values to the DIV. Now the DIV fits the entire browser viewport.

I now want to over-ride these dimensions using media queries when a user resizes the window. On a smaller screen, I want to set the height and width of the DIV to a smaller dimension than the window height and width?

Is this possible? Can heights and widths set using JavaScript be over-ridden by media queries?

Answer 1

As long as you keep your media queries pretty simple you could do a simple javascript if/else statement.

 if (screen.width < 480) {
     // Set some variables
 } else {
     // Set other variables
 }

Another option, there's the newer window.matchMedia API.