考虑在页面中加入一些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>
最佳答案
您可以在 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)")
关于javascript - 使用 PHP 或 JS 对 @media 查询中的 html 元素进行优先级排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21591187/