Question

考虑在页面中有一些div

<div id="1">
<div class="2">content</div>
<div class="3">content</div>
<div class="4">content</div>
<div class="5">content</div>
</div>

有没有办法在不同的媒体查询中整理这些div？

例如，如果设备是“iPad肖像”，则代码应为;

<div id="1">
    <div class="5">content</div>
    <div class="2">content</div>
    <div class="4">content</div>
    <div class="3">content</div>
    </div>

Answer 1

您可以在javascript中使用媒体查询，然后根据您的匹配执行不同的DOM操作。在此示例中，如果窗口小于770px，我们将使用jQuery反转顺序。

var mediaQuery = window.matchMedia( "(max-width: 770px)" );
if ( mediaQuery.matches ) {
    var container = $('#1');
    var items = container.children('div');
    container.append( items.get().reverse() );
}

您当然可以根据需要对项目进行排序，而不是将它们反转。

你几乎可以使用任何媒体查询，这样的事情对你来说可能更有用：

window.matchMedia("screen and (max-device-width: 480px) and (orientation: portrait)")

使用PHP或JS优先处理@media查询中的html元素

1 个答案: