Question

简要说明

我创建了一个响应式网站，有效地拥有三种视图（桌面，平板电脑，移动设备）。大部分设计都是通过CSS使用媒体查询进行更改（因为它应该用于响应式网站）。但是，部分设计太复杂，不能简单地通过CSS操作，因为HTML实际上需要在DOM周围移动。我知道这听起来不太好但是我不知道如果不移动我的HTML中的某些元素，我还有什么意思复制这个设计。

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

我的问题

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

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

进一步说明

如果上述内容不明确，请阅读以下内容：

考虑这三种不同的观点：

Responsive Views

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

桌面

<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

我建议您使用.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
    }
}

Answer 2

你可以试试这个：

假设这个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;
    }
}

<强> Fiddle example

这基本上会切换您看到的两个导航部分中的哪一个，具体取决于屏幕尺寸。它的缺点是源代码中存在重复的html（数据量的差异实际上可以忽略不计），但是您不需要JavaScript来获得效果，而JS禁用的设备只会显示一个ul。< / p>

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

Answer 3

enquire.js库允许您触发JS函数以响应CSS媒体查询，从而解决了这个问题。因此，您可以根据不同的屏幕大小运行detach（）和append（）逻辑。它的重量很轻。

请参阅：http://wicky.nillia.ms/enquire.js/

Answer 4

有许多方法，例如appendTo

//check for the window width
if($(window).width() < 700){
  //append to the p  
  $('#some_container nav').appendTo('#some_container p');
}

Answer 5

我刚刚编写了一个jQuery插件，它正是这样做的，看看here。基本上它会根据行和列自动构建一系列布局，然后用于上面显示的不同视图

Answer 6

我现在正在通过导航来执行此操作，我需要将其移至台式机的标题中，并将其移至移动设备上汉堡包菜单的标题下方。我在调整大小的窗口上有一个事件侦听器，该事件侦听器调用一个检查屏幕大小并将其传递给我的toggleNavigation函数的函数。我将其分开，是因为除了在checkBreakPoint中未列出的其他功能外，我还有其他一些功能。然后，要确保它不会持续移动我的dom或重新添加它，我首先检查它在哪个父容器中，并且仅在它不在该屏幕尺寸的容器中时才移动它。我的项目要求它没有任何外部依赖关系，因此只能使用纯Javascript完成，然后使用媒体查询根据屏幕尺寸设置元素的样式。

var mainNav = document.getElementById('rww_main_nav'); //element I want to move
var tieredHeader = document.getElementById('rww_tiered_header'); //where it should be on mobile
var branding = document.getElementById('rww_branding'); //where it should be on desktop

window.addEventListener("resize", checkBreakPoint);

function checkBreakPoint() {
        //width of viewport
        var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        toggleNavLocation(w);
}

function toggleNavLocation(screensize) {
    if (screensize > 999) {
        if (mainNav.parentElement.id === 'rww_tiered_header') {
            branding.appendChild(mainNav);
        }
    } else {
        if (mainNav.parentElement.id === 'rww_branding') {
            tieredHeader.appendChild(mainNav);
        }
    }
}

Answer 7

如果您不想制作JavaScript，请使用网格技术。

<div class="main_container">
    <nav class="grid_nav">
        <ul>
        </ul>
    <nav>
    <div class="grid_text">
        <p>Some Text</p>
    </div>
    <!-- The rest of the content -->
</div>

.main_container{
  display: grid;
  @media screen and (max-width: 500px) { //mobile
    grid-template-rows:    1fr 1fr;
    grid-template-areas: "gridnav"
                         "gridtext";
  }
  @media screen and (min-width: 500px) {//web
    grid-template-rows:    1fr 1fr;
    grid-template-areas: "gridtext"
                         "gridnav";
  }
}

.grid_nav{
  grid-area: gridnav;
}
.grid_text{
  grid-area: gridtext;
}

但是仅当移动位于“ main_container”内部时

致谢...

Answer 8

这可能会引入一系列全新的问题，但您可以在要移动的元素上使用position：absolute，并根据屏幕大小让它们在页面周围重新定位吗？

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

简要说明

我的问题

进一步说明

8 个答案: