2

我有一个标准网站，其中包含页面下方的导航部分。当调整到 980 像素时，媒体查询开始，导航需要改变外观（简单），但也需要改变 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，所以这可能不是一个选择。

非常感谢。

4

1 回答 1

0

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

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

不过，请查看enquire.js，它肯定会对您有所帮助。

于 2013-05-19T21:30:31.437 回答