Как скрыть DIV при переключении на мобильные размеры?

Итак, я написал страницу в 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 в разделе был скрыт на мобильных устройствах.


html css amp-html
person Robert Dewitt    schedule 28.04.2016    source источник
comment
Вы используете бутстрап? попробуй скрытый-md-down   -  person Benjamin Poignant    schedule 28.04.2016
comment
@BenjaminPoignant Bootstrap 3 ориентирован на мобильные устройства. Внизу нет.   -  person isherwood    schedule 28.04.2016
comment
Вы пытались использовать медиа-запросы или встроенные классы начальной загрузки?   -  person Gino Pane    schedule 28.04.2016
comment
@isherwood: так что просто используйте hidden-*   -  person Benjamin Poignant    schedule 28.04.2016

Ответы (3)


arrow_upward
5
arrow_downward

В Bootstrap есть классы для такого рода вещей. Используйте их по отдельности или в комбинации для достижения желаемого результата.

hidden-xs

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

person isherwood    schedule 28.04.2016
comment
Разве вы не должны использовать скрытое и невидимое и нацеливаться на маленькое, а не на очень маленькое? - person Goose; 28.04.2016
comment
small означает вертикальные столы, extra-small — мобильные устройства. Треки меньше 767 пикселей. Прикрепленная ссылка объясняет это довольно хорошо. - person Ardian; 28.04.2016
comment
Это не так однозначно. Многие телефоны имеют такое же (или более высокое) разрешение, чем планшеты (которые также являются мобильными). - person isherwood; 28.04.2016
comment
Не совсем. Несмотря на то, что они имеют разрешение в пикселях, они используют в основном стандартные области просмотра, когда дело доходит до браузера. Пример: Nexus 5 (1920 x 1080 – область просмотра браузера: 640 x 360 (@3x) - person Ardian; 28.04.2016

arrow_upward
1
arrow_downward

С помощью мультимедийных запросов CSS3 вы можете заставить CSS действовать по-разному в разных разрешениях.

Пример:

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

Вот полный учебник:

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

person robert hofer    schedule 28.04.2016

arrow_upward
0
arrow_downward

Просто добавьте класс .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>
person Amitesh Chauhan    schedule 28.04.2016
comment
Также получил тот же результат с ‹div class=hidden-xs align=right› - person Robert Dewitt; 28.04.2016