javascript - 使用 PHP 或 JS 对 @media 查询中的 html 元素进行优先级排序

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 portrait”，代码应该是；

<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 操作。在此示例中，如果窗口小于 770 像素，我们将使用 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)")