Фонд - Медиа-запросы

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

Foundation использует следующие медиа-запросы для создания диапазонов разбивки:

Small - Используется для любого экрана.
Medium - Используется для экранов от 640 пикселей и шире.
Large - Используется для экранов от 1024 пикселей и шире.

Вы можете изменить размер экрана, используя классы точек останова . Например, вы можете использовать класс .small-6 для экранов небольшого размера и класс .medium-4 для экранов среднего размера, как показано в следующем фрагменте кода:

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Изменение точек останова

Вы можете изменить точки останова, если ваше приложение использует SASS-версию Foundation. Вы можете разместить имя точки останова под переменной $ breakpoints в файле настроек, как показано ниже -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

Вы можете изменить классы точек останова в файле настроек, изменив переменную $ breakpoint-classes . Если вы хотите использовать класс .large в CSS, добавьте его в конец списка, как показано ниже -

$breakpoints-classes: (small medium large);

Предположим, вы хотите использовать класс .xlarge в CSS, а затем добавить этот класс в конец списка, как показано ниже -

$breakpoints-classes: (small medium large xlarge);

SASS

Миксин точки останова

Вы можете написать медиа-запросы, используя миксин breakpoint () вместе с @include .
Используйте ключевые слова down или only вместе со значением точки останова, чтобы изменить поведение медиа-запроса, как показано в следующем формате кода:

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }
   
   // code for medium screens only
   @include breakpoint(medium only) { }
}

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

Функция точки останова

Функциональность миксина breakpoint () можно использовать с помощью внутренней функции.
Функциональность breakpoint () может использоваться напрямую для написания собственных медиа-запросов -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Работа с медиа-запросами

Foundation JavaScript предоставляет функцию MediaQuery.current для доступа к текущему имени точки останова в объекте Foundation.MediaQuery, как указано ниже:

Foundation.MediaQuery.current

Функция MediaQuery.current отображает маленькие , средние и большие имена текущих точек останова.
Вы можете получить медиа-запрос точки останова с помощью функции MediaQuery.get, как показано ниже -

Foundation.MediaQuery.get('small')

Справочник Sass

Переменные

В следующей таблице перечислены переменные SASS, которые можно использовать для настройки стилей компонента по умолчанию.

Sr. No.	Имя и описание	Тип	Значение по умолчанию
1	$breakpoints Это имя точки останова, которое можно использовать для записи медиа-запросов с помощью миксина breakpoint () .	карта	small: 0px средний: 640 пикселей большой: 1024 пикселей xlarge: 1200 пикселей xxlarge: 1440 пикселей
2	$breakpoint-classes Вы можете изменить вывод класса CSS, изменив переменную $ breakpoint-classes .	Список	маленький Средний Большой

Миксины

Mixins создает группу стилей для построения структуры классов CSS для компонентов Foundation.

BREAKPOINT

Он использует миксин breakpoint () для создания медиа-запросов и включает в себя следующие действия:

Если строка передана, то миксин ищет строку в карте $ breakpoints и создает медиа-запрос.
Если вы используете значение пикселя, преобразуйте его в значение em с помощью $ rem-base .
Если передается значение rem, то единицы измерения меняются на em.
Если вы используете значение em, его можно использовать как есть.

В следующей таблице указан параметр, используемый точкой останова -

Sr. No.	Имя и описание	Тип	Значение по умолчанию
1	$value Он обрабатывает значения, используя имя точки останова, значения px, rem или em.	ключевое слово или номер	Никто

Функции

BREAKPOINT

Он использует миксин breakpoint () для создания медиа-запросов с совпадающим входным значением.

В следующей таблице указано возможное входное значение, используемое точкой останова -

Sr. No.	Имя и описание	Тип	Значение по умолчанию
1	$val Он обрабатывает значения, используя имя точки останова, значения px, rem или em.	ключевое слово или номер	небольшой

Справочник по JavaScript

Функции

Есть два типа функций -

.atLeast- Проверяет экран. Он должен быть широким по крайней мере как точка останова.
.get - Используется для получения медиа-запроса точки останова.

В следующей таблице указаны параметры, используемые вышеуказанными функциями -

Sr. No.	Имя и описание	Тип
1	size Он проверяет и получает имя точки останова для указанных функций соответственно.	Строка