«Как показать или скрыть контент на сайте для разных разрешений экрана?»

Управляем видимостью информации на разных устройствах

Плюс
Рассказать друзьям
Отправить
Рассказать родителям
Линк
Вотсапнуть
Запинить

Адаптивный дизайн – залог успешного сайта, этот фактор влияет и на поисковую выдачу.


Адаптивный – это какой?

Адаптивный дизайн – тот, который подстраивается под разные разрешения экрана при этом не теряя своей привлекательности. Это может производится как и засчёт адаптации каждого элемента сайта, так и банальным управлением отображения/скрытия контента на мобильных устройствах. Процесс создание адаптивного дизайна достаточно трудный, но скрыть или показать блоки сайта в зависимости от разрешения можно за несколько минут.
как сделать шаблон адаптивным


Как сделать адаптивную вёрстку?

Для того, чтобы сайт подстраивался под разные типы устройств, необходимо задать значения под все диапазоны экранов в таблице стилей CSS. Каждый шаблон состоит из блоков, у которых есть свой класс или идентификатор. Необходимо найти в таблице стилей нужный блок и прописать его поведение при различных экранных разрешениях. Возьмём, к примеру, фрагмент из таблицы стилей моего сайта. Блок w-container.

.w-container{margin-left:auto;margin-right:auto;max-width:940px} @media screen and (max-width:991px){.w-container{max-width:728px}

Как видно из первой строчки, стандартная максимальная ширина для десктопного разрешения экрана составляет 940 пикселей. Из второй строчки легко заметить, что если максимальное разрешение экрана устройства в ширину не более 991 пикселя, блок будет растягиваться максимум на 728, что предотвратит разрушение структуры шаблона и контент будет всегда в зоне видимости.

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


Как скрыть часть информации от мобильных устройств?

как скрыть информацию для мобильных устройств
Как Вы уже поняли, в помощь нам приходит media screen в CSS, с помощью которого можно регулировать отображение структуры сайта в зависимости от разрешений экранов. Для начала, нам нужно заключить скрываемую информацию в дополнительный div-контейнер, назовём его hidemobile.

<div class="hidemobile">информация, которую не надо отображать на мобильных телефонах</div>

А после этого, добавить в style.css вашего сайта следующий фрагмент кода:

@media screen and (max-width: 600px) { .hidemobile { visibility: hidden; display: none; } }

В этом случае, если разрешение экрана устройства менее 600 пикселей, контент, заключенный в этот div, на нём не отобразится. Значение max-width Вы можете поменять на своё усмотрение.


Как сделать информацию видимой только на мобильных устройствах?

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

Порядок действий схожий с предыдущим пунктом. Обернем нужный контент в новый div.

<div class="showmobile">информация, которую будет видно только на телефонах</div>

А после добавим в style.css сайта этот фрагмент кода:

.showmobile { display: none; } @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ .showmobile { display: inline; }}

Удачной вёрстки!

Как мы выяснили, при помощью несложных CSS-конструкций с применением media screen можно управлять отображением информации на странице. Также, предлагаю вам почитать каким должен быть продающий сайт и способы отправки HTML-писем.



Если статья была полезна для Вас, поделитесь ей в социальных сетях:

Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Вотсапнуть
Запинить