Question

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

<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类添加到要从移动设备隐藏的元素中。

<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？

3 个答案: