动态媒体查询

Question

我目前使用js/jq调整事件来应用css规则到一个水平菜单（宽度可变），当它变得过大无法适应屏幕时。然而，菜单在新规则应用之前会短暂地换行。

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

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

这可能吗？谢谢您的帮助。Chris GW Green

- Chris GW Green

Answer 1

你可以通过编写代码来创建媒体查询规则，通过测量菜单的宽度（使用js /jQuery）来激活它：

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

媒体查询并不是为了根据页面或屏幕中元素的宽度变化而设计的，而是更多地依据于视口/窗口本身和其他因素的变化。（完整列表可以在这里找到。）

您还没有发布菜单代码，因此很难理解您所遇到的“包裹”问题，但如果您的水平菜单“超出屏幕”，则最好将菜单设置为视口的百分比（%）宽度，并使用一系列媒体查询，在特定的屏幕宽度下重新绘制菜单并更改/删除子元素等。

- nickhar

Answer 2

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

由于meta是HTML标记，因此您可以根据需要更改其值：

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

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

元标签的示例用法

- David Fariña

---

谢谢David，但我不想改变网站的视口。我正在尝试使用CSS媒体查询使页面响应。我只是想知道是否可以动态更改断点。 - Chris GW Green

这甚至是你想要实现的。无论如何，出于性能原因，你不应该使用媒体查询。看看这个网站，我认为它是你想要的：链接。 - David Fariña

Answer 3

你可以使用matchMedia来完成这个任务。

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

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

- grandinero