Html 使用CSS根据屏幕分辨率在两个div之间切换

我们正在为我们的产品开发一个新的用户界面，出于多种原因，需要根据设备是移动设备还是桌面设备在两个

标签之间切换。每个

都将包含适用于移动或桌面的适当内容，但由于我们只有一个HTML页面，因此我们需要能够打开一个

，同时关闭另一个

这个问题是一个后续问题，与我在这里提出的问题非常相似。为了重述在那里找到的解决方案，有两个

s：

<div class="visible-phone">
    content for phone
</div>

<div class="visible-desktop">
    content for desktop
</div>

为了达到这个目的，考虑一个最小宽度为700 px，最大宽度为900px的器件。这将突破上述CSS逻辑的漏洞，导致

都不可见。作为另一个例子，从500px到750px的设备也不包括在内

---

有人能提出一个完整的证明方法来避免参考答案中的弱点吗？此处首选基于CSS的解决方案。

您可以使用的是在媒体查询中不显示任何内容。使用分配给每个div的不同类，例如mobile和desktop，然后在桌面集的媒体查询中使用visiblephone{display:none；}和mobile集的查询中使用。visible desktop{display:none；}

---

这将确保在指定的媒体查询中始终隐藏一个div，然后您只需获取屏幕大小值=）

您可以使用的是在媒体查询中显示无。使用分配给每个div的不同类，例如mobile和desktop，然后在桌面集的媒体查询中使用visiblephone{display:none；}和mobile集的查询中使用。visible desktop{display:none；}

---

这将确保在指定的媒体查询中始终隐藏一个div，然后您只需获取屏幕大小值=）

如果我理解正确，您将尝试执行以下操作：

CSS

@media screen and (max-width: 480px) {
  .visible-phone{
    display: block !important;
  }
  .visible-desktop{
    display: none !important;
  }
}
@media screen and (min-width: 480px) {
  .visible-phone{
    display: none !important;
  }
  .visible-desktop{
    display: block !important;
  }
}

---

如果我对您的理解正确，您正在尝试：

CSS

@media screen and (max-width: 480px) {
  .visible-phone{
    display: block !important;
  }
  .visible-desktop{
    display: none !important;
  }
}
@media screen and (min-width: 480px) {
  .visible-phone{
    display: none !important;
  }
  .visible-desktop{
    display: block !important;
  }
}

---

为介于两者之间的范围添加媒体查询，并决定显示哪些内容（或为平板电脑创建其他内容）。@Paul这是一个聪明的主意，但让我扮演魔鬼代言人的角色。假设我们添加（480768）作为第三媒体查询。但现在，范围从（450700）到（450700）的设备将再次不包括在内。不管是谁炮制了这些媒体质疑的东西，他显然很享受精神上的折磨：-）为什么不把它包括在内呢？根据各种因素，它只会显示不同的

div

s，例如从纵向（450）旋转到横向（700）模式。这里的潜在问题是，即使我们定义了几个窄范围，如果一个设备与边界条件重叠，那么它最终也不属于任何类别。记住，进入媒体查询范围的条件是最小值大于范围的底部，最大值小于范围的顶部。你确定吗？据我所知，最大宽度为480px的媒体查询适用于所有480px或以下的视口。添加介于两者之间的媒体查询，并决定显示哪些内容（或为平板电脑创建其他内容）。@Paul这是一个聪明的主意，但让我扮演魔鬼代言人。假设我们添加（480768）作为第三媒体查询。但现在，范围从（450700）到（450700）的设备将再次不包括在内。不管是谁炮制了这些媒体质疑的东西，他显然很享受精神上的折磨：-）为什么不把它包括在内呢？根据各种因素，它只会显示不同的

div

s，例如从纵向（450）旋转到横向（700）模式。这里的潜在问题是，即使我们定义了几个窄范围，如果一个设备与边界条件重叠，那么它最终也不属于任何类别。记住，进入媒体查询范围的条件是最小值大于范围的底部，最大值小于范围的顶部。你确定吗？据我所知，

max width:480px

的媒体查询适用于所有480px或以下的视口。我目前正在尝试这些方法，但我发现了一个潜在的问题。假设一个设备的最小宽度为400px，最大宽度为800px。由于800px的

max width

太大，因此无法满足第一种样式。但是第二种样式也不会满足，因为400px的

minwidth

太小了。所以，有可能会有一些装置落入无人区。我不确定，但也许你们这方面有误解。任何给定时间的任何设备/视口只能有一个宽度。这个单一宽度值（与范围相对）决定了要使用的媒体查询。@TimBiegeleisen我试图想象这样的麻烦。“我有一个浏览器窗口，可以在400px和800px之间更改其宽度。第一种风格是在400px到480px范围内工作，480px之后第二种风格可以工作。我目前正在尝试这方面的东西，但我发现了一个潜在的问题。假设一个设备的最小宽度为400px，最大宽度为800px。由于800px的

max width

太大，因此无法满足第一种样式。但是第二种样式也不会满足，因为400px的

minwidth

太小了。所以，有可能会有一些装置落入无人区。我不确定，但也许你们这方面有误解。任何给定时间的任何设备/视口只能有一个宽度。这个单一宽度值（与范围相对）决定了要使用的媒体查询。@TimBiegeleisen我试图想象这样的问题。“我有一个浏览器窗口，可以在400px和800px之间更改其宽度。第一种样式在400px到480px范围内工作，第二种样式在480px之后工作。