Question

我们正在为我们的产品开发新的用户界面，出于多种原因，需要根据设备是移动设备还是桌面设备在两个<div>标签之间切换。每个<div>都会包含适用于移动设备或桌面设备的内容，但由于我们只有一个HTML网页，因此我们需要能够在关闭另一个<div>的同时打开一个<div>。

这个问题是this SO question的后续问题，与我在这里提出的问题非常相似。要回顾那里找到的解决方案，有两个<div class="visible-phone"> content for phone </div> <div class="visible-desktop"> content for desktop </div> s：

.visible-phone{
    @media (max-width: 480px) { more css }
}

.visible-desktop{
    @media (min-width: 768px) { more css }
}

并且有两个CSS规则使用最大或最小屏幕分辨率：

<div>

为了达到目的，请考虑最小宽度为700px且最大宽度为900px的设备。这将落在上述CSS逻辑的裂缝中，并且不会导致text-align: center可见。另一个例子，也不包括从500px到750px的设备。

有人建议采用全面的方法来避免引用答案的弱点吗？这里首选基于CSS的解决方案。

Answer 1

您可以使用的是在媒体查询中不显示任何内容。使用分配给每个div的不同类（如移动设备和桌面设备），然后在桌面设置的媒体查询中设置.visiblephone {display：none;}和查询移动设备.visible-desktop {display：none;}

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

Answer 2

如果我理解你正确的话你会这样做：

<强> 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基于屏幕分辨率在两个DIV之间切换

2 个答案: