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 中创建另一个(因为它不会获取该 PHP 代码)。

最终解决方案是复制class bottom，删除原class bottom中的class left，删除class right 在重复的 class bottom 中。

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

您可能需要使用 bootstrap 3 寻找响应式布局。Bootstrap 3 可以解决上述问题... The Bootstrap library