动态媒体查询

Question

我正在使用js / jq resize事件将css规则应用于水平菜单（可变宽度），当它对于屏幕来说太大时。然而，在应用新规则之前，菜单会暂时换行。

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

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

这可能吗？

提前致谢。

Chris GW Green

Answer 1

您可以以编程方式创建媒体查询规则 - 通过测量菜单的宽度（使用js / jQuery）激活：

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

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

你没有发布你的菜单代码所以很难理解你正在经历的'包装'，但是如果你的水平菜单是' off screen '，那么你可能会更好将菜单设置为视口的百分比（％）宽度，并使用一系列媒体查询重新绘制菜单并更改/删除子元素等在特定屏幕宽度。

Answer 2

尝试元标记，而不是媒体查询。在元标记中，您还可以使用最小宽度属性。

好像meta是一个html标签，然后您可以根据自己的喜好更改值：

var element = document.getElementByTagName('meta')[0];

element.setAttribute('content','Value');

Example use of meta tag