0

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

页面是单列。

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

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

我已经研究过使用 CSS 预处理器，但不幸的是它不可用，而且我们的大量用户被困在使用 IE11 中，所以我认为我不能使用常规的 CSS 变量。

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

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

4

2 回答 2

0

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

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

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

于 2021-08-15T04:51:20.570 回答
0

所以这就是我最终要做的。

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

然后我为 vars 添加了一些基本的 JS，并为每个工作表添加了 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”变量。

于 2021-03-01T19:18:56.170 回答