Обнаружение ориентации базовых классов видимости CSS

Foundation CSS — это адаптивная интерфейсная среда с открытым исходным кодом, созданная фондом ZURB в сентябре 2011 года. Она позволяет легко создавать красивые адаптивные веб-сайты, приложения и электронные письма, которые выглядят потрясающе и могут быть доступны на любом устройстве. Его используют многие компании, такие как Facebook, eBay, Mozilla, Adobe и даже Disney. Фреймворк построен на SaaS-подобном бутстрапе. Он более сложный, гибкий и легко настраиваемый. Он также поставляется с интерфейсом командной строки, поэтому его легко использовать с сборщиками модулей. Он предлагает инструмент Fastclick.js для более быстрого рендеринга на мобильных устройствах.

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

Базовые классы видимости CSS Класс обнаружения ориентации:

• show-for-landscape : этот класс используется для отображения содержимого в ландшафтном режиме.
• show-for-portrait : этот класс используется для отображения содержимого в портретном режиме.

Синтаксис:

<div class="show-for-landscape"> Content </div>
<div class="show-for-portrait"> Content </div>

Пример . В этом примере описывается ориентация класса видимости в Foundation CSS.

Выход:

Пример 2. В этом примере мы будем переключать цвет фона в зависимости от типа ориентации в Foundation CSS.

Выход:

Ссылка : https://get.foundation/sites/docs/visibility.html#orientation-detection