Как скрыть элемент на телефоне, а на пк оставить?

У меня есть элемент на странице, который должен отображаться только на компьютерах. Как мне это сделать? Можно ли это реализовать с помощью css @media?

Отслеживать
задан 3 мар 2022 в 13:31
Alexandr_Yakovlev Alexandr_Yakovlev
648 2 2 серебряных знака 12 12 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

В Вашем случае Вы можете использовать, к примеру, медиа-запрос и указывать в нем максимальную ширину экрана (в пикселях или, лучше всего, в относительных единицах, типа 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; >> 

CSS: Свойства display и visibility

CSS свойства display и visibility позволяют скрывать элементы (делать их невидимыми) и полностью убирать элементы из HTML разметки (в этом случае браузер игнорирует элемент, при построении разметки страницы).

Блочные и строчные элементы

Большинство элементов в CSS классифицируются как блочные ( block ) или строчные ( inline ), и это влияет на то, как эти элементы будут отображаться по умолчанию на веб-странице.

Важно знать к какому типу относится элемент, так как не все CSS свойства работают с обоими типами элементов. Некоторые CSS свойства работают только с блочными элементами, другие только со строчными.

CSS свойство display позволяет переопределить тип элемента, заданный по умолчанию. Что в свою очередь, позволят по необходимости изменять тип элемента со строчного на блочный или с блочного на строчный.

Строчные элементы

Элемент определённый как строчный, будет занимать только необходимое количество места на веб-странице (занимаемое место зависит от содержимого строчного элемента), кроме этого такие элементы:

• игнорируют верхний и нижний внешний отступ, если он применен
• игнорируют свойства height и width
• могут быть выровнены с помощью свойства vertical-align

Строчный элемент можно сделать блочным если установить для свойства display значение block или если сделать элемент плавающим. Плавающие элементы автоматически становятся блочными, то есть появляется возможность регулировать размер элемента и задавать внешние отступы.

Блочные элементы

Блочные элементы всегда начинаются с новой строки и занимают всю доступную ширину, если ширина для элемента не была установлена. Кроме этого блочные элементы:

• могут иметь внешние и внутренние отступы
• растягиваются по высоте под свое содержимое
• не выравниваются свойством vertical-align

Строчно-блочные элементы

Строчно-блочное отображение элемента задается значением inline-block . В основном это способ сделать элемент строчным, но сохранить его «блочные» возможности: изменение высоты и ширины элемента, регулирование размеров внешних и внутренних отступов.

Примечание: значение inline-block не поддерживается в IE7 и более ранних версиях.

Скрытие элементов

В CSS есть возможность временного или постоянного скрытия некоторых элементов веб-страницы. Стоит обратить внимание на то, что скрытые элементы не будут отображаться только на веб-странице, но их можно будет посмотреть в исходном коде HTML-документа. Для скрытия элементов используется или свойство display со значением none или свойство visibility со значением hidden :

• display: none; — указание браузеру скрыть элемент, убрав его из общего потока элементов. В этом случае элемент, расположенный после скрытого элемента, будет смещаться вверх, занимая место скрытого элемента.
• visibility: hidden; — указание браузеру скрыть элемент, зарезервировав под него место на веб-странице. В этом случае браузер только скрывает элемент, не удаляя его из общего потока, поэтому на месте скрытого элемента останется пустое пространство, совпадающее по размеру с размером скрытого элемента.

     h1.hidden < visibility: hidden; >h2.none 
Это видимый заголовок
 
Скрытый заголовок
 
Скрытый заголовок2
 
Элемент, который скрыт с помощью свойства visibility, все равно занимает пространство там, где он должен находиться в отличие от элемента скрытого с помощью свойства display, который убран из общего потока страницы.
   

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

Как скрыть элемент?

1. С помощью display: none; . Элемент полностью исчезает с веб-страницы, не оставляя и следа.

2. Задав для элемента visibility: hidden; . Данный способ убирает элемент из вида, при этом не затрагивая поток html-документа, оставляя пустое пространство в том месте, где данный элемент должен был находиться.

3. С помощью свойства opacity . Значение opacity: 0; делает прозрачным весь элемент целиком, включая его содержимое, а не только фон элемента. Данный способ действует аналогично с visibility: hidden , отличие состоит лишь в том, что свойство opacity введено в спецификацию CSS3.

Для абсолютно позиционированных элементов visibility: hidden и display: none ведут себя одинаково.

Чтобы показать невидимый элемент, можно использовать псевдокласс :hover , например:

.submenu < display: none; >.submenu:hover

CSS-свойство, отвечающее только за видимость элементов — это свойство visibility . Оно принимает следующие значения:

visibility: visible; — элемент видимый по умолчанию;

visibility: hidden; — элемент становится невидимым, находясь при этом на своем месте. В то же время элементы-потомки невидимого элемента можно сделать видимыми, например:

p < visibility: hidden; >p strong

visibility: collapse; — данное свойство применяется для табличных элементов, делая ячейки таблицы невидимыми. Если это свойство используется для остальных элементов, то оно работает аналогично с visibility: hidden; ;

visibility: inherit; — наследует это свойство от родительского элемента.

Скрытие элементов средствами CSS

В CSS существует несколько способов скрыть элемент. При этом скрытие может быть как полным, так и чисто визуальным. Разберем по порядку каждый вариант.

Скрытие элемента с помощью opacity: 0

Если быть точным, свойство opacity не скрывает элемент, а лишь определяет его степень прозрачности. Значение 1 означает полную непрозрачность объекта, а значение 0 , соответственно, приводит к полной прозрачности, в результате чего элемент перестает быть виден для посетителя. Последняя часть предложения важна: элемент будет скрыт лишь визуально, но при этом он будет занимать свое место на странице, влиять на положение других элементов, и с ним можно будет взаимодействовать (к примеру, он станет непрозрачным при наведении мыши, если определить соответствующий стиль для состояния :hover ). Скрин-ридеры также будут видеть данный элемент.

Преимуществом свойства opacity является его совместимость с transition . Это значит, что можно заставить элемент изменять свою прозрачность плавно, а не рывком. Тем самым можно создать красивое появление элемента.

Скрытие элемента с помощью visibility: hidden

В отличие от свойства прозрачности, свойство visibility специально предназначено для визуального скрытия элементов. Значение hidden скрывает элемент, а значение visible — показывает. Как и в случае с opacity , элемент продолжает занимать свое место на странице, однако взаимодействовать с элементом, скрытым с помощью visibility: hidden , нельзя. Скрин-ридеры не видят такой элемент.

Свойство visibility не реагирует на свойство transition , а это означает, что изменение значения с hidden на visible (либо наоборот) будет происходить мгновенно.

На практике для временного скрытия элементов часто используется два свойства сразу — visibility и opacity (в одном из практических уроков мы уже показывали этот прием). При этом убивается сразу несколько зайцев: с помощью visibility элемент скрывается как положено (в т. ч. от скрин-ридеров), а с помощью opacity обеспечивается плавное появление элемента в необходимый момент.

Скрытие элемента с помощью display: none

Свойство display со значением none стоит использовать в том случае, если вам нужно полностью скрыть элемент. Такой объект (и все его дочерние элементы) не только перестает быть виден посетителю и скрин-ридеру, но и не занимает места на странице и не влияет на расположение других элементов. Всё выглядит так, словно элемента и нет. Естественно, взаимодействовать с элементом, который скрыт данным образом, тоже невозможно.

Как и в случае со свойством visibility , свойство display не поддерживает плавные переходы transition .

Скрытие элемента с помощью position: absolute

Еще один способ скрыть элемент исключительно визуально — задать ему абсолютное позиционирование, выдернув из общего потока документа, и затем переместить далеко за пределы видимой области путем установки больших отрицательных значений для свойств top и left . Например:

Логично предположить, что спрятать таким образом элемент от скрин-ридеров нельзя, да и в целом не рекомендуется применять этот вариант скрытия, поскольку есть более надежные и правильные способы, описанные выше. Однако в некоторых нетривиальных ситуациях веб-разработчики всё же используют его.

Далее в учебнике: CSS Grid Layout — будущее уже здесь.