Dynamic Media Queries

Question

I'm currently using a js/jq resize event to apply a css rule to a horizontal menu (of variable width) when it becomes too large for the screen. The menu however wraps momentarily before the new rule is applied.

Ideally I'd like to measure the menu width and change the break point of a media query!

@media screen and (min-width: THIS-VALUE){
    New Rules
}

Is this possible??

Thanks in advance.

Chris GW Green

Answer 1

You can create a media query rule programatically - activated by measuring the width of your menu (using js/jQuery):

  document.querySelector('style').textContent +=
     "@media screen and (min-width:400px) { div { color: red; }}"

Media queries aren't designed to activate on the changing width of an element within a page or screen though - more by changes to the viewport/window itself and other factors. (A full list can be found here)

You've not posted your menu code so it's hard to understand the 'wrapping' you're experiencing, but if your horizontal menu is going 'off screen', then you might be better off setting the menu as a percentage(%) width of viewport and using a series of media queries that re-draw the menu and change/remove child elements etc at certain screen widths.