У меня есть элемент на странице, который должен отображаться только на компьютерах.
Как мне это сделать? Можно ли это реализовать с помощью css @media?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВ Вашем случае Вы можете использовать, к примеру, медиа-запрос и указывать в нем максимальную ширину экрана (в пикселях или, лучше всего, в относительных единицах, типа em
), на которой указанный Вами элемент будет скрываться либо свойством display: none;
, либо visibility: hidden;
, в зависимости от того, какого эффекта Вам нужно добиться при скрытии элемента.
Размер экрана, который Вы будете считать уже компьютерным, определите сами, но обычно, это минимум 1024px (или 64em)
, но лучше будет указать ширину 1200px (или 75em)
.
Это может выглядеть примерно так:
.element {
display: block;
}
@media(max-width: 75em) {
.element {
display: none;
}
}
Можно пойти другим путем и указать наоборот: минимальную ширину экрана, при которой Ваш элемент будет отображаться, а на всех экранах, ниже этой ширины, он будет скрываться. Пример:
.element {
display: none;
}
@media(min-width: 75em) {
.element {
display: block;
}
}
Используя правило @media Тут немного инфы
.resize{
width: 720px;
height: 620px;
border: 2px solid #000;
display: flex;
flex-direction: column;
justify-content: center;
resize: both;
overflow: auto;
}
.resize > div{
width: 100%;
text-align: center;
}
@media only screen and (max-width: 480px) {
.pc{
display: none;
}
}
@media only screen and (min-width: 480px) {
.mob{
display: none;
}
}
<div class="resize">
<div class="all">Показать всем</div>
<div class="pc">Показать на пк</div>
<div class="mob">Показать на телефоне</div>
</div>