Question

希望这是一个简单的答案。我有一个页面，在桌面上需要一段文字下面的一系列共享图标（fb，tw，ig）。但是在移动设备上，这些图标已经包含在模板中，所以我不需要它们来展示。它看起来很重复。我使用的是CMS，只能访问页面的正文，而不能访问标题，所以广泛的javascript并不理想。什么内联CSS样式或其他这样的魔法将使这个div消失？我可以仅在经过验证的移动设备上缩小它，还是仅使用浏览器窗口大小来实现它？

目前代码非常简单：

<html>
    <body>
        Some text here.
        <div id="mydiv">
            <img src="/some/icon1.png">
            <img src="/some/icon2.png">
            <img src="/some/icon3.png">
        </div>
    </body>
</html>

我需要做的就是制造＆＃34; mydiv＆＃34;如果我使用的是iPhone，iPad或Android设备，我就会消失......

谢谢！

Answer 1

您可以使用媒体查询：

媒体查询由媒体类型和零个或多个限制样式表的表达式组成。范围使用媒体功能，例如宽度，高度和颜色。

当媒体查询为true时，将按照正常的级联规则应用相应的样式表或样式规则。

文档：

例如：

＆＃13;

@media (max-width: 787px) {
  #mydiv {
    display: none;
  }
}

＆＃13;

Some text here.
<div id="mydiv">
  <img src="/some/icon1.png">
  <img src="/some/icon2.png">
  <img src="/some/icon3.png">
</div>

＆＃13;

如何让手机上的图标消失？

1 个答案: