javascript - 动态媒体查询

Question

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

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

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

这可能吗？？

提前致谢。

克里斯 GW 格林

Answer 1

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

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

媒体查询并非旨在激活页面或屏幕中元素的宽度变化 - 更多的是通过更改视口/窗口本身和其他因素。（可在此处找到完整列表）

您尚未发布菜单代码，因此很难理解您正在经历的“包装”，但如果您的水平菜单正在“离屏”，那么您最好将菜单设置为百分比（%）宽度视口并使用一系列媒体查询，在某些屏幕宽度下重新绘制菜单并更改/删除子元素等。

Answer 2

尝试元标记，而不是媒体查询。在元标记中，您还可以使用 min-width 属性。

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

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

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

元标记的示例使用

Answer 3

您可以使用matchMedia完成此操作。

我在这个答案中给出了一个用法示例。

我假设您只需要测量一次菜单宽度。这个解决方案应该很容易适应。