javascript - Dynamic Media Queries -


i'm using js/jq resize event apply css rule horizontal menu (of variable width) when becomes large screen. menu wraps momentarily before new rule applied.

ideally i'd measure menu width , change break point of media query!

@media screen , (min-width: this-value){     new rules } 

is possible??

thanks in advance.

chris gw green

you can create media query rule programatically - activated measuring width of menu (using js/jquery):

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

media queries aren't designed activate on changing width of element within page or screen though - more changes viewport/window , other factors. (a full list can found here)

you've not posted menu code it's hard understand 'wrapping' you're experiencing, if horizontal menu going 'off screen', might better off setting menu percentage(%) width of viewport , using series of media queries re-draw menu , change/remove child elements etc at screen widths.


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -