如何在无点击事件下按屏幕尺寸（<567px）切换Div显示

没问题，这个需求用纯CSS媒体查询就能轻松搞定，完全不需要JavaScript或者点击事件，直接靠响应式断点来控制两个div的显示隐藏就行。

实现思路 #

核心就是利用CSS的@media媒体查询，针对屏幕尺寸设置不同的显示规则：

• 当屏幕宽度小于567px时，显示div1，隐藏div2
• 当屏幕宽度大于等于567px时，显示div2，隐藏div1

完整代码示例 #

HTML结构

先给两个div加上明确的类名，同时修正你提到的注释笔误（原来的注释说div1在567px以上显示，应该改成小屏显示的说明）：

<!-- 小屏（<567px）显示的div1 -->
<div class="div1">
  <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>
    <!-- 这里补充你表格的其他内容 -->
  </table>
</div>

<!-- 大屏（>=567px）显示的div2 -->
<div class="div2">
  <!-- 这里放入div2的内容，比如你原来大屏要显示的内容 -->
  <p>这是大屏下显示的内容</p>
</div>

CSS样式

通过媒体查询切换两个div的display属性：

/* 默认状态：大屏下显示div2，隐藏div1 */
.div1 {
  display: none;
}

.div2 {
  display: block;
}

/* 当屏幕宽度小于567px时，切换显示状态 */
@media (max-width: 566.98px) {
  .div1 {
    display: block;
  }
  
  .div2 {
    display: none;
  }
}

关键说明 #

• 用max-width: 566.98px而不是567px是为了避免浏览器像素精度问题，确保刚好567px时触发大屏规则
• 不需要任何JavaScript逻辑，完全靠CSS的响应式特性自动适配屏幕尺寸
• 如果你的div有特殊布局（比如flex、grid），可以把display: block换成对应的布局属性，比如display: flex

内容的提问来源于stack exchange，提问作者user9563422