如何在切换到移动尺寸时隐藏 DIV？

Question

所以，我在 AMP 中编写了一个页面 HTML，我有一个 DIV 当有人在移动设备上查看该页面时，我想隐藏它，但我希望它在移动设备上显示分辨率，例如台式机或平板电脑。我启用了 Bootstrap 并且所有 CSS 都在文档的样式中根据 AMP 标准设置了样式。

<section class="about" id="about" alt="about">

<div class="col-md-6">
<p>Example Content</p>
</div>

<div class="col-md-6">
<amp-img src="example.jpg" alt="Example" height="400" width="800"></amp-img>
</div>

</section>

我希望该部分中的第二个 DIV 在移动设备上隐藏。

Answer 1

Bootstrap 对这种事情有类。单独或组合使用它们以达到预期的效果。

hidden-xs

http://getbootstrap.com/css/#responsive-utilities-classes

Answer 2

使用 CSS3 媒体查询，您可以 CSS 在不同的分辨率下表现不同。

示例：

@media screen and (min-width: 480px) {
    #yourdiv {
        visibility: hidden;
    }
}

这里是完整教程：

http://www.w3schools.com/css/css3_mediaqueries.asp

Answer 3

只需将 .hidden-xs class 添加到您要在移动设备上隐藏的元素。

<section class="about" id="about" alt="about">

  <div class="col-md-6">
    <p>Example Content</p>
  </div>

  <div class="col-md-6 .hidden-xs">
    <amp-img src="example.jpg" alt="Example" height="400" width="800"></amp-img>
  </div>

</section>

如何在切换到移动尺寸时隐藏 DIV？

How do I hide a DIV when I switch to mobile dimensions?

html

css

amp-html