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

【问题标题】：CSS media to hide/show div in mobile and desktop?CSS媒体在移动和桌面隐藏/显示div？
【发布时间】：2017-08-13 00:16:17
【问题描述】：

我有这个真实代码来根据设备类型显示和隐藏两个 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>

【问题讨论】：

真的有必要检测设备类型而不仅仅是屏幕尺寸吗？
@mayersdesign 好的，我如何检测设备？
你在安卓设备上检查这个吗？
@SahilDhir 是的，问题只出在 Android 设备上。

标签： html css responsive-design media-queries

【解决方案1】：

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

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

你可以使用min-width

另外，不要在img 中使用width/height html 标签，而是使用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>

【讨论】：

不适用于 Android 设备。同样的问题：只显示“#div-desktop”。你可以在这里查看uggafood.com
这成功了：
您可以省略 @media screen 和 (max-width: 700px){ ... } 并采用移动优先方法

【解决方案2】：

我刚刚检查了实时链接。

响应式设备缺少元标记。

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

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

【讨论】：

添加这个真的放大了我的移动网站，放大了两倍或三倍。其他人有这个问题吗？

【解决方案3】：

将您的 media queries 更改为以下内容。

只需将宽度更改为您想要的任何值。顶部媒体查询说如果最小宽度高于标准移动尺寸显示xyz，然后第二个说如果它低于则显示abc。

@media screen and (min-width: 769px) {

    #div-mobile { display: none; }
    #div-desktop { display: block; }

}

@media screen and (max-width: 768px) {

    #div-mobile { display: block; }
    #div-desktop { display: none; }

}

【讨论】：

【解决方案4】：

这一行只查找用户系统的大小分辨率并提供给您的 css 代码 <meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

【解决方案5】：

如果您使用 sass，这是一种非常有效的方式来影响媒体查询并为每个设计编写适当的 css：https://eduardoboucas.github.io/include-media

include-media 是一个 Sass 库，用于以简单且可维护的方式编写 CSS 媒体查询，使用自然和简单的语法。

【讨论】：

请为任何链接添加上下文，以便您的答案是独立的，这意味着答案需要在答案本身中。见"Provide context for links"。如果您可以在此处用自己的话回答问题并仅作为参考链接，那将是更可取的。它是如何工作的？它是如何使用的？请展示它是如何回答问题的。