與PHP或JS

Question

@media詢問的優先級html元素想想在頁面

<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有一些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)")