如何根据屏幕大小替换HTML元素？
提问于 2021-01-12 21:31:13
我需要通过媒体查询将<ol>元素替换为<ul>元素，所以当用户处于桌面模式时，结果应该是这样的：
<ol>
<li></li>
<li></li>
<li></li>
</ol>但在移动领域，它应该是：
<ul>
<li></li>
<li></li>
<li></li>
</ul>这可以通过媒体查询或jQuery来实现吗？
回答 2
Stack Overflow用户
发布于 2021-01-12 21:38:30
我不确定这是否可能，但你可以为每个人使用一个类，并通过显示来操纵它们：
<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中放入您需要的内容。
Stack Overflow用户
发布于 2021-01-12 21:49:05
代替具有多个(ol列表和ul列表)..只需根据媒体查询更改光盘类型即可：
@media (max-width: 640px) {
ol {
list-style-type: disc
}
}这意味着它的OL (小数)，当它命中某些媒体查询(移动)时，它仍然是OL，但类型可以更改为disc。除非你需要两个实际的ol/ul，否则这是你最好的选择。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65692346
复制
腾讯云开发者
