Question

我已经找到了这个问题的答案，但我还没找到我正在寻找的东西。

我正在尝试根据显示我的网站的屏幕大小来切换div。

在完整尺寸（例如计算机显示器）下，我的div将显示.png文件，但是当屏幕尺寸缩小到移动大小的端口时，我希望它显示另一个包含一系列.png文件的div一排。

如果代码清晰有用，则代码目前看起来像这样：

<div class="section" id="section1">
  <div class="slide">
    <img id="logo" src="img/TestImageA.png">
  </div>

  <div class="slide">
    <img id="logo" src="img/TestImageB.png">
  </div>
</div>

<!-- 
  <div class="section" id="section1-mobile">
    <div class="slide">
      <div class="customer-container-1">
        <img id="logo" src="img/PAGE2_Customer_1.png">
      </div>
      <div class="customer-container-2">
        <img id="logo" src="img/PAGE2_Customer_2.png">
      </div>
      <div class="customer-container-3"">
        <img id="logo" src="img/PAGE2_Customer_3.png">
      </div>
      <div class="customer-container-4">
        <img id="logo" src="img/PAGE2_Customer_4.png">
      </div>
      <div class="customer-container-5">
        <img id="logo" src="img/PAGE2_Customer_5.png">
      </div>
    </div>

    <div class="slide">
      <div class="inventory-container-1">
        <img id="logo" src="img/PAGE2_Inventory_1.png">
      </div>
      <div class="inventory-container-2">
        <img id="logo" src="img/PAGE2_Inventory_2.png">
      </div>
      <div class="inventory-container-3">
        <img id="logo" src="img/PAGE2_Inventory_3.png">
      </div>
      <div class="inventory-container-4">
        <img id="logo" src="img/PAGE2_Inventory_4.png">
      </div>
      <div class="inventory-container-5">
        <img id="logo" src="img/PAGE2_Inventory_5.png">
      </div>
    </div>
</div> 
    -->

Answer 1

您正在寻找的内容称为 media query 。在at W3Schools上提供了基本教程。

在以下示例中，我使用宽度700px来反转DIV的显示：

@media scren and (max-width: 700px) {
  #section1-mobile {
    display: block;
  }
  #section1 {
    display: none;
  }
}

移动设备会看到#section1-mobile，常规设备会看到#section1。

请注意，媒体查询会在DOM中按顺序显示“优先级”，您甚至可以链接媒体查询，例如：

@media scren and (max-width: 700px) and (min-width: 600px) { }

这将允许您定位非常具体的设备集;只需更改像素值即可。事实上，甚至有一些pre-defined standards针对您可以利用的常用设备！

希望这有帮助！：）

Answer 2

你应该使用Bootstrap。另请检查https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

显示/隐藏Div以响应不同大小的屏幕

2 个答案: