问动态媒体查询

EN

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

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

然而，媒体查询并不是为了在页面或屏幕中元素的宽度变化时激活的-更多的是通过更改视口/窗口本身和其他因素来激活的。(完整的名单可以在here上找到)

你还没有发布你的菜单代码，所以很难理解你正在经历的“环绕”，但如果你的水平菜单正在“离开屏幕”，那么你最好将菜单设置为视口的百分比(%)宽度，并使用一系列媒体查询来重新绘制菜单，并在某些屏幕宽度处更改/删除子元素等。

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

就像meta是一个html标签一样，你可以随心所欲地改变它的值：

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

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

Example use of meta tag

您可以使用matchMedia来实现这一点。

我给出了一个使用示例in this answer。

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