Question

我有一个标准网站，其中包含导航部分页面。当调整大小到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＆＃39; .on（）＆＃39;将DOM结构移回原来的位置，否则一旦移动它就不再识别选择器，这似乎又增加了相当大的处理负担。

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

我认为可能会有一些非常尖端的CSS3来做这种事情，但我需要支持回到IE7以便可能不是一个选项。

非常感谢。

Answer 1

如果你给它position:fixed，并根据最大偏移量，它应该有用。

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

尽管如此，请查看enquire.js，它可能对您有所帮助。

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

1 个答案: