<分区>
<分区>
//这里我有 2 个 div，我希望 div1 在 567px 之前显示在屏幕上，但在 567px 屏幕尺寸之后我希望 div2 显示在 div1 之上
//这是我的 div1 应该显示在 567px 屏幕尺寸以上
<table style="width:100%">
<thead>
<tr class="header">
<th>PARAMETERS </th>
<th>Scio </th>
<th>Path Lab</th>
<th>Fitness Apps</th>
<th>Insurance Co’s</th>
<th>Teleconsultant App</th>
</tr>
</thead>
<tbody>
<tr>
<td>Annual Blood Test </td>
<td><img src="/static/success.png"></td>
<td><img src="/static/success.png"></td>
<td></td>
<td><img src="/static/success.png"></td>
<td></td>
</tr>
<tr>
//这是我想要显示的 div2 而不是 div 但仅适用于小于等于 567px 的屏幕尺寸
<div class="card-container">
<div class="table-cards">
<div class= "card1">
<div class="rows head-row">
<div>Annual Blood Test </div>
</div>
<div class="rows">
<div>Scio</div>
<div><img src="/static/success.png"></div>
</div>
<div class="rows">
<div>Path Labs</div>
<div><img src="/static/success.png"></div>
</div>
<div class="rows">
<div>Fitness Apps</div>
<div></div>
</div>
<div class="rows">
<div>Insurance Co's</div>
<div><img src="/static/success.png"></div>
</div>
<div class="rows">
<div>Teleconsultant App</div>
<div></div>
</div>
</div>
</div>
请帮我解决这个问题，让我知道最简单的方法
最佳答案
使用 css 你可以进行媒体查询并隐藏你想要的 div，你的 css 将是这样的:
div2{ display: none }
div1{ display: block}
@media (max-width: 567px){
div2{ display: block }
div1{ display: none }
}
关于html - 如何仅针对小于 567 像素的屏幕尺寸将一个 div 替换为其他 div 而没有任何点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49637784/
相关文章：
Android CSS 问题 : fantom white overlay (zoomable and touchable) in every browser very strange
jquery - 在jquery中如何在select中获取选中的文本
javascript - 如何将 CSS Sprite 背景实现到现有的 JavaScript 变量中？
javascript - 侧边栏不会强制触摸父 Div 的底部
javascript - 如何使用 jquery .load 打开模态框
javascript - 检查 HTML 输入元素是否为空或没有用户输入的值
javascript - 使用 Tab 键进行页面导航时滚动到表单元素上的错误消息
javascript - 如何在用户单击饼图时隐藏其余区域？