Dynamic Media Requests

Question

I am currently using the js / jq resize event to apply a css rule to a horizontal menu (variable width) when it gets too large for the screen. The menu, however, overlays instantly before applying the new rule.

Ideally, I would like to measure the width of the menu and change the breakpoint of the media request!

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

Is it possible?

Thanks in advance.

Chris gw green

Answer 1

You can create a multimedia query rule programmatically - activate by measuring the width of your menu (using js / jQuery):

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

Requests in the media are not intended to be activated when the width of the element on the page or screen changes, although this is due to changes in the viewport / window itself and other factors. (Full list can be found here )

You have not posted your menu code so that it is difficult to understand the “wrapping” you are experiencing, but if your horizontal menu is “turned off”, you might be better off setting the menu as a percentage (%) of the width of the viewport and using a series of media queries that re-draw menus, as well as modify / delete children, etc. at certain screen widths .

Answer 2

Try meta tags, not media queries. In the meta tag, you can also use the min-width property.

As if meta is an html tag, you can change the value as you like:

 var element = document.getElementByTagName('meta')[0]; element.setAttribute('content','Value'); 

Meta tag example