在DOM中移动元素以进行响应式Web设计

Question

简要说明

我创建了一个响应式网站,有效地拥有三个视图(桌面,平板电脑,移动设备).大部分设计都是通过CSS使用媒体查询进行更改(因为它应该用于响应式网站).但是,部分设计太复杂,不能简单地通过CSS操作,因为HTML实际上需要在DOM周围移动.我知道这听起来不太好但是我无法看到我是如何在不移动HTML中的某些元素的情况下复制此设计的.

因此,考虑到上述情况,我现在计划编写一个函数,为每个不同的"响应视图"创建自定义事件.当每个事件被触发时(与CSS媒体查询同步),它将执行一些Javascript来移动/动画使用CSS无法操纵的任何元素.

我的问题

这是最好的方法吗？如果,不是,我还有其他选择吗？我可以查看和学习任何现有的图书馆吗？

我的实际问题是; 在DOM中移动元素以进行响应式网页设计的最佳方法是什么？

进一步说明

如果上述内容不明确,请阅读以下内容:

考虑以下三种不同的观点:

现在考虑前两个视图的代码:

桌面

<div id="some_container">
    <nav>
        <ul>
        </ul>
    <nav>
    <p>Some Text</p>
    <!-- The rest of the content -->
</div>

片剂

<div id="some_container">
    <p>Some Text</p>
    <nav>
        <ul>
        </ul>
    <nav>
    <!-- The rest of the content -->
</div>

请注意,nav标签已移至p标签下方...

Answer 1

你可以试试这个：

假设这个 HTML：

<div id="some_container">
    <nav id="n1">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
    <p>Some Text</p>
    <nav id="n2">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
</div>

您只需要以下 css：

#n1{
    display:none;
}

@media only screen 
and (min-width : 600px) {
    #n1{
        display:block;
    }
    #n2{
        display:none;
    }
}

小提琴示例

这基本上会根据屏幕大小切换您看到的两个导航部分中的哪一个。它的缺点是你的源中有重复的 html（数据量的差异真的可以忽略不计），但是你不需要 JavaScript 来获得效果，并且禁用 JS 的设备只会显示一个ul.

这种方式的好处在于它非常具有可扩展性。在不同的页面上需要这种“效果”？你只需要编辑[u]那个[/u]页面。不要乱用 JavaScript，硬编码新的类/案例。

Answer 2

enquire.js 库通过允许您触发 JS 函数来响应 CSS 媒体查询来解决这个问题。所以你可以根据不同的屏幕尺寸运行你的 detach() 和 append() 逻辑。启动起来很轻巧。

见：http : //wicky.nillia.ms/enquire.js/

Answer 3

我建议你根据页面大小使用.insertAfter()和.resize()/ .ready()来移动元素:

$(window).resize(){
    resize();
}

$(document).ready(){
    resize();
}

function resize(){
    if($(window).width() < 480)
    {
        //Mobile
        $("#some_container nav").insertAfter("#some_container p");
    }
    else if($(window).width() < 800)
    {
        //Tablet
        $("#some_container nav").insertAfter("#some_container p");
    }
    else
    {
        //Desktop
        //Leave original layout
    }
}