根据屏幕大小重新排列 DOM 的最佳方法

Posted 2023-05-09

【中文标题】根据屏幕大小重新排列 DOM 的最佳方法

【英文标题】：Best approach for rearranging DOM according to screen size

【发布时间】：2013-05-14 10:08:48

【问题描述】：

我有一个标准网站，其中包含页面下方的导航。当调整到 980px 时，媒体查询开始，导航需要改变外观（简单），但也需要改变 DOM 中的位置，使其位于页面顶部。我不能为此使用 CSS 定位，因为它不起作用。

目前我正在尝试将一些 jQuery 逻辑绑定到页面加载/调整大小/更改方向事件，如下所示：

var mobileBreakPoint = 980;
$(window).bind('load resize orientationchange', function () 
    if ($(window).width() <= mobileBreakPoint) 
        $('.primary').insertAfter('.new-placeholder');
     else 
        $('.primary').insertAfter('.original-placeholder');
    
);

但是，首先我不确定使用 javascript 在页面周围移动相当大的 html 块是否是一个好主意（请记住，该网站预计在移动设备上运行良好，因此媒体查询！）；其次，我上面的代码需要使用 jQuery '.on()' 之类的东西来将 DOM 结构移回其原始位置，否则一旦移动它就不再识别选择器，这似乎又是增加了相当大的处理负担。

我想知道是否有人对此有任何好的想法？这是最好的前进方式吗？我应该停止担心性能，还是应该只渲染两次导航并使用 CSS 显示/隐藏不同的版本？

我认为可能会有一些非常前沿的 CSS3 东西来做这种事情，但我需要支持回到 IE7，所以这可能不是一个选择。

非常感谢。

【参考方案1】：

如果你给它position:fixed，并根据顶部偏移量，它应该可以工作。

响应式设计中大量的布局重新排列是一个开放的话题，我猜没有通用的解决方案：要么你隐藏不需要的东西 [e.g. hidden-* Bootstrap 类]，要么你复制一些东西 [避免 imo]。

尽管如此，看看enquire.js，它肯定会对你有所帮助。