动态媒体查询 [英] Dynamic Media Queries

问题描述

我目前使用js / jq resize事件来应用css规则到水平菜单（可变宽度），当它变得太大的屏幕。然而，在应用新规则之前，菜单会立即包装。

理想情况下，我想测量菜单宽度并更改媒体查询的断点！

  @media screen and（min-width：THIS-VALUE）{
 New Rules 
} 
  

这可能吗？

提前。

Chris GW Green

解决方案

通过测量菜单的宽度（使用js / jQuery）来激活它：

  document.querySelector（'style'）。 textContent + = 
@media screen and（min-width：400px）{div {color：red;}}
  

媒体查询不是为了在页面或屏幕中元素的宽度变化时激活，而是通过更改视口/窗口本身和其他因素来激活。 （可以在此处找到完整列表）

您尚未发布您的菜单代码，因此很难理解您遇到的换行，但如果您的横向菜单在屏幕上 您最好将菜单设置为视口的百分比（％）宽度，并使用一系列媒体查询重新绘制菜单并更改/删除子元素等在特定屏幕宽度。 / p>

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

解决方案

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.

这篇关于动态媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！