Question

//这里我有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>

请帮助我，让我知道最简单的方法

Answer 1

使用css你可以进行媒体查询并隐藏你想要的div，你的CSS会是这样的：

div2{ display: none }
div1{ display: block}

@media (max-width: 567px){
  div2{ display: block }
  div1{ display: none }
}

如何在没有任何点击事件的情况下，将屏幕尺寸小于567像素替换为div

1 个答案: