如何根據屏幕尺寸替換 HTML 元素？

Question

我需要通過媒體查詢用<ul>元素替換<ol>元素，所以當用戶處於桌面模式時，結果應該是這樣的：

    <ol>
     <li></li>
     <li></li>
     <li></li>
    </ol>

但在手機上應該是：

    <ul>
     <li></li>
     <li></li>
     <li></li>
    </ul>

可以通過媒體查詢或 jQuery 來做到這一點嗎？

Answer 1

我不確定它是否可能，但你可以為每個使用 class 並通過顯示操作它們：

<ol class="first-list">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

<ul class="second-list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

在 CSS 上：

@media(max-width:768px){
    .first-list{
        display:none;
    }
    .second-list{
        display:block;
    }
}

當然你可以輸入你需要的max-width 。

Answer 2

而不是有多個（ol 列表和 ul 列表）.. 只需根據媒體查詢更改光盤類型即可：

@media (max-width: 640px) {
  ol {
    list-style-type: disc
  }
}

這意味着它的 OL（小數）並且當它遇到某些媒體查詢（移動）時它仍然是 OL 但類型可以更改為disc 。 除非您同時需要實際的 ol/ul，否則這是您最好的選擇。