CSS 媒体在移动和桌面中隐藏/显示 div？

Question

我有这个 真实的代码 来根据设备类型显示和隐藏两个 div：

问题：在 Android 中显示#div-desktop。

• 我只需要在移动设备上显示 div#div-mobile

• 我只需要在桌面设备上显示 div#div-desktop

CSS

         @media screen and (min-width: 0px) and (max-width: 700px) {
      #div-mobile {    display: block;  }
      #div-desktop {    display: none;  }
    }

    @media screen and (min-width: 701px) and (max-width: 3000px) {
      #div-mobile {    display: none;  }
      #div-desktop {    display: block;  }

}

HTML

 <div id="div-mobile">m<img width="100%" height="auto" src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_mobile.jpg" alt="" width="600" height="1067" /></div>

<div id="div-desktop">d<img width="100%" height="auto"  src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_desktop.jpg" alt="" width="1920" height="1280" /></div>

原文由 JPashs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我刚刚检查了实时链接。

响应式设备缺少元标记。

添加以下代码以检测移动设备。

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

原文由 Sahil Dhir 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

编辑 看到您的网站后，您需要添加：

 <meta name="viewport" content="width=device-width, initial-scale=1">

---

您可以只使用 min-width

另外，不要在 中使用 width/height html 标签 img 使用 CSS

---

 img {
  max-width: 100%
}

#div-desktop {
  display: none;
}

@media screen and (min-width: 701px) {
  #div-mobile {
    display: none;
  }
  #div-desktop {
    display: block;
  }
}

 <div id="div-mobile">m<img src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_mobile.jpg" alt="" /></div>
<div id="div-desktop">d<img src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_desktop.jpg" alt="" /></div>

原文由 dippas 发布，翻译遵循 CC BY-SA 3.0 许可协议