Javascript + HTML根据手机大小更改HTML

Question

我要完成的工作无法通过CSS进行媒体查询来完成。

<div class='bottom'>
    <div class='left'>
        <input type='submit' class='default' value='<?php echo order; ?>'/>
    </div>
    <div class='right'>
        <input type='submit' class='default' value='<?php echo clear; ?>'/>
        <input type='submit' class='default' value='<?php echo save; ?>'/>
    </div>
</div>

此代码在大于533px的屏幕（大多数为平板电脑）中可以完美运行，但在较小的屏幕（移动设备）中，最后两个按钮与底部重叠。

我不想将第一个按钮的文字省略，我想创建类“底部”的另一行。 像这样：

<div class='bottom'>
    <div class='right'>
        <input type='submit' class='default' value='<?php echo clear;?>'/>
        <input type='submit' class='default' value='<?php echo save;?>'/>
    </div>
</div>
<div class='bottom'>
    <div class='left'>
        <input type='submit' class='default' value='<?php echo order; ?>'/>
    </div>
</div>

如您所见，我在html内包含PHP，这意味着我无法删除整个div并在Javascript中创建另一个div（因为它将无法获取该PHP代码）。

最终的解决方案是复制类的底部 ，删除留在原班底部 类 ，并在复制类底部删除类权 。

if (window.matchMedia('(min-device-width: 533px)').matches) {
    var class_bottom = $(".bottom").html(); // duplicated

    $(".bottom .left").remove(); // works
    $(class_bottom + " .right").remove(); // doesn't work
    $(class_bottom).insertAfter($(".bottom")); // doesn't work
}

谢谢大家， 解决了 。

if (window.matchMedia('(min-device-width: 533px)').matches) {
    var class_bottom = $(".bottom").clone(); // nice trick

    $(".bottom .left").remove();
    $(class_bottom).find('.right').remove(); // remove right on clone
    $(class_bottom).insertAfter($(".bottom")); // insert AFTER the original class
}

Answer 1

您可能需要通过使用引导程序3寻找响应式布局。引导程序3可以解决上述问题... 引导程序库