我可以动态更改媒体查询最大宽度吗？答案

【问题标题】：Can I Dynamically Change Media Query Max-Widths?我可以动态更改媒体查询最大宽度吗？
【发布时间】：2021-05-31 02:40:07
【问题描述】：

我有一堆内容页面遵循模块化设计，页面上有 10 个左右的可变组件。它相对复杂，因为有一大堆媒体查询来使各种组件响应并确保它们同时适应。

页面是单列的。

我的任务是将此内容提取到 50 多个其他网站，这些网站的内容可用宽度各不相同，内容的左侧和/或右侧各列都有。

使用单列媒体查询快照点，内容不会根据需要调整大小，因此我需要为所有正在摄取内容的网站使用不同的快照点。

我曾研究过使用 CSS 预处理器，但遗憾的是它不可用，而且我们的大量用户都卡在使用 IE11，所以我认为我不能使用常规的 CSS 变量。

我希望避免每个提取内容的网站都需要新的 CSS 副本。

我将非常感谢任何关于解决方案的建议或任何我可以探索的途径的想法。

【问题讨论】：

由于您不能使用 CSS 变量，是否可以改为使用 Javascript 设置媒体查询，而使用 JS 变量？
这就是我想要得到的地方:) 要么重写 CSS 或使用 JS vars，要么根据媒体查询将 CSS 分解成一堆工作表，并且只在适当的时候加载。有 32 个查询，所以会有很多样式表，但由于真正的用户不会在不同的选项之间调整我们的页面大小，所以它可能并不重要。如果仅媒体查询不占 1700 行，我可能只是用 JS 即时编写了 CSS。

标签： javascript jquery css variables media-queries

【解决方案1】：

这就是我最终要做的事情。

首先，我将每个媒体查询的 CSS 分成单独的样式表，例如1024.css、768.css等

然后我为 vars 添加了一些基本的 JS，并为每个工作表添加了 import 语句（会有更多的 import 和 vars，但本质上）：

// vars
widerBy = 300;
media1200 = 1200;
media1024 = 1024;
media768 = 768;

theLinker = '<style>'+
'@import url(css/'+media1200+'.css) only screen and '+
'(max-width: '+(media1200+parseInt(widerBy))+'px)';

$(document).ready(function {
  $('head').append(theLinker);
});

不是很花哨，但它解决了我的问题。

编辑：由于新页面将根据它们的附加列将各种预定数量的 px 宽，我还设置了一个具有该差异的 var 以添加到原始值中，以计算何时应导入 CSS而不是需要为每个新站点创建 32 个变量。

还需要考虑新网站的响应更改，以便根据需要更改“widerBy”变量。

【讨论】：

【解决方案2】：

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

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

根据MDN，IE10+支持，但我没有在IE中测试过。

【讨论】：