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

Медиа-запросы - это модуль 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

Он проверяет и получает имя точки останова для указанных функций соответственно.

Строка