2019-09-19. Адаптивное отображение медиаблоков

Дано:

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

Решение:

  1. Для сайта, исходя из дизайна, определяются «адаптивные диапазоны».
  2. Для каждого медиаблока можно указать, при каких диапазонах он будет отображаться, а при каких — нет.

Реализация:

  1. Задаём по умолчанию диапазоны от Bulma: mobile, tablet, desktop, widescreen, fullhd.
  2. В каждом проекте верстальщик адаптирует набор диапазонов.

Статус:

Готово. Доступно на сайтах конструктора.
Задача #38723.

Пример:

Этот блок выводится только на десктопе.

Под этим блоком существует скрытый блок — только для мобильной версии. Вы можете его увидеть, нажав F12, и выбрав тип устройства (Ctrl+Shift+M).

Пример:

Этот блок выводится только на мобильной версии. Блок десктопной версии теперь скрыт.

Поделиться: