CSS фреймворк IPS4 является адаптивным, то есть элементы адаптируются в зависимости от размера экрана пользователя. В большинстве случаев, описанные в этом документе классы выполняют роль адаптивности для вас; например, меню автоматически регулируется в зависимости от размера экрана, и на мобильных телефонах вкладки меню автоматически перестраиваются в выпадающее меню.
Могут возникнуть ситуации, когда вам нужно контролировать отображение каких-либо элементов в зависимости от размера экрана устройства. Например, если вы добавили собственный элемент в футер, вы можете захотеть скрыть его на планшетах и телефонах.
Классы адаптивности, которые есть в IPS4, позволяют вам контролировать подобное поведение элементов.
Адаптивные размеры, используемые в IPS4
В рамках медиа-запросов, контролирующих адаптивность, существуют следующие размеры экранов:
- Телефоны - до 767 пикселей в ширину.
- Планшеты - между 768 пикселей и 979 пикселей в ширину.
- Настольные компьютеры - 980 пикселей и шире.
Основной функционал показать/скрыть
CSS фреймворк включает в себя две группы по три класса в каждой, которые скрывают или отображают элементы на настольных компьютерах, планшетах и мобильных телефонах соответственно. Классы действуют исключительным способом; то есть, если вы используете класс для отображения, любые устройства, которые не соответствуют этому классу, не будут отображать элемент. И наоборот, если вы используете класс скрытия, элемент не будет отображаться, но на других устройствах, не попадающих под действие данного класса, элемент будет отображён.
Эти классы:
- ipsResponsive_hidePhone
- ipsResponsive_hideTablet
- ipsResponsive_hideDesktop
- ipsResponsive_showPhone
- ipsResponsive_showTablet
- ipsResponsive_showDesktop
Вы можете комбинировать их, если хотите. Например:
<div class='ipsResponsive_hidePhone ipsResponsive_hideTablet'> Данный элемент *не будет* отображаться на телефонах или планшетах, но *будет* на настольных компьютерах </div>
Дополнительные классы для управления отображением элементов
При использовании классов отображения, описанных выше, вы, как правило, должны включать дополнительный класс, контролирующий как будет отображаться элемент. Это может быть один из следующих классов:
- ipsResponsive_block
- ipsResponsive_inlineBlock
- ipsResponsive_inline
<div class='ipsResponsive_showDesktop ipsResponsive_block'> Этот элемент будет отображаться *только* на размерах экрана настольного компьютера, и будет отображаться как блочный элемент. </div>
Эти дополнительные классы обычно не используются для классов скрытия элементов.