Как скрыть div на пк?

Question

[Muslim Mamaev]

Здравствуйте! Как скрыть div на всех пк ноутбуках с помощи css, а с телефона было видно.

Answer 1

[Дмитрий]

Используйте медиа-запросы.

Comments

[Muslim Mamaev]

я изучаю. так правильно будет?
media only screen and (max-width : 1200px) {
div {
display: none;
}
}

[Шамуэй]

Muslim Mamaev, да

[Дмитрий]

Да, так и нужно.

@media only screen and (max-width: 1200px) {
div {
display: none;
}
}

Новичкам, верстающим без препроцессоров, часто рекомендуют юзать валидатор jigsaw.w3.org/css-validator для быстрого обнаружения синтаксических ошибок.

[Muslim Mamaev]

а как сделать чтоб див отобразился на нужном мне размере экрана?

[Дмитрий]

Понять как работают медиа-запросы.

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

}

В скобках можно много чего указать, скобок может быть несколько и через запятую, но основное назначение - указать начиная с какого или заканчивая каким размером применить указанные css блоки объявлений.

[Дмитрий]

Яркий пример

@media (min-height: 680px), screen and (orientation: portrait) { ... }

@Медиа-запрос с правилом (минимальная высота для активации запроса), и (ориентация девайса: портретная ) { вложенные стили для активации }

[Muslim Mamaev]

так правильно будет? media only screen and (min-width: 640px){ max-width: 1200px
.contactsgw2{display: none;}
}

[Дмитрий]

@media screen and (min-height: 680px),  and (orientation: portrait) { ... }
@media screen and (min-height: 1024px),  and (orientation: portrait) { ... }

Как видите тут медиазапросы активируют вложенные css блоки объявления от 680 и брейкпоинт (точка изменения, с прерыванием предыдущего медиа-запроса) начинается с 1024 пикселей, то есть с разрешения старого моника или хорошего планшета, типо айпада.

//up
с 680 пикселей одни стили, а после 1024 пикселей другие будут.

[Muslim Mamaev]

а почему высота указана min-height ?

[Дмитрий]

@media only screen and (min-width: 640px) and (max-width: 1024px) { .contactsgw2 {display: none;}}

[Дмитрий]

Muslim Mamaev, Это указание минимальной высоты экрана.
Можно указать минимальную высоту и максимальную, с шириной аналогично. Это делается для применения стилей для определенного размера экрана, для того, чтобы последовательность изменений не прерывалась, при изменении размеров экрана.

[Muslim Mamaev]

Дмитрий Полянский, Вы не могли бы мне в одном помочь?

[Дмитрий]

Muslim Mamaev, в чем именно?

Answer 2

[Muslim Mamaev]

скажите так правильно media only screen and (max-width : 1200px) {
div {
display: none;
}
}

Comments

[Дмитрий]

Необходимо так

@media only screen and (min-width: 1200px) {
    div {
        display: none;
    }
}

т.к если вы укажите max - тогда необходимо будет еще раз прописать для моб. устройств (для отображения)