javascript - 使用 JavaScript 移动内容 block 以进行响应式设计

Question

我目前正在一个高度响应的网站上工作，我遇到了 2 个区域，其中某些内容 block 需要移动到网站的其他区域。纯粹使用 CSS 是不可能做到这一点的。我想我可以相对地重新定位 block ，但随着尺寸的变化，这真的不可能。

我正在考虑的选项是，当媒体查询被触发时，然后从页面中拉出一个 block 并将其附加到我需要的其他地方。

我意识到这并不理想，我想问的是这样做是否合理。

我知道你们中的一些人可能会说重新排序一些标记，但这是不可能的。如上所述，我知道回退到 javascript 并不理想，但它适合这种情况，我不特别希望复制内容只是为了避免使用 javascript。

Flexbox 会是完美的，但支持不是我目前想要的，我现在可以使用它。

这里的人怎么看？还有其他解决方案吗？

Answer 1

正确的方法是使用 MediaQueryList 来监听媒体查询:

var mql = window.matchMedia("(max-width: 320px)");
mql.addListener(function(event) {
 if(event.matches) {
  // Window width is less than or equal to 320, do something cool.
 } else {
  // Window width is more than 320, do something else.
 }
});

事件将在满足或“未满足”查询时触发。

或者，您可以监听调整大小事件，但请注意，您的函数将针对每个新维度触发。 (假设下面的代码中使用 jQuery。)

$(window).resize(function() {
 if($(window).width() <= 320) {
  // Window width is less than or equal to 320, do something cool.
 } else {
  // Window width is more than 320, do something else.
 }
});

不过正如您自己所说，通常不建议使用 JS 使您的布局具有响应性。您永远不能假设您的所有用户都启用了 JS，并且一切顺利。

我宁愿看到您通过重构 HTML 和 CSS 来解决这个问题。如果内容布局必须改变很多，请尝试在 HTML 中的两个不同位置输出内容 block 并使用 CSS 媒体查询切换可见性(将一个设置为 display:none;，另一个设置为 显示: block ；)。您应该能够通过重新考虑您的网站结构来解决大多数响应式布局问题。