动态媒体查询

Posted 2023-03-06

【中文标题】动态媒体查询

【英文标题】：Dynamic Media Queries

【发布时间】：2013-04-11 10:48:29

【问题描述】：

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

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

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

这可能吗？？

提前致谢。

克里斯 GW 格林

【参考方案1】：

您可以通过matchMedia 完成此操作。

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

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

【参考方案2】：

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

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

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

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

【参考方案3】：

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

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

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

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

Example use of meta tag

【讨论】：

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

它甚至是您想要实现的目标。无论如何，由于性能原因，您不应该使用媒体查询。看看这个网站，我认为它是你想要的：link