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

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

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

• Маленький — Используется для любого экрана.

• Средний — используется для экранов размером 640 пикселей и более.

• Большой — используется для экранов размером 1024 пикселя и более.

Маленький — Используется для любого экрана.

Средний — используется для экранов размером 640 пикселей и более.

Большой — используется для экранов размером 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

Точка останова Mixin

• Вы можете написать медиа-запросы, используя breakpoint () mixin вместе с @include .

• Используйте ключевые слова down или only вместе со значением точки останова, чтобы изменить поведение медиазапроса, как показано в следующем формате кода —

Вы можете написать медиа-запросы, используя breakpoint () mixin вместе с @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 () mixin с помощью внутренней функции.

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

Вы можете использовать функциональность функции breakpoint () mixin с помощью внутренней функции.

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

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

JavaScript

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

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

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

Foundation.MediaQuery.current

• Функция MediaQuery.current отображает маленькие , средние , большие имена текущих точек останова.

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

Функция MediaQuery.current отображает маленькие , средние , большие имена текущих точек останова.

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

Foundation.MediaQuery.get('small')

Sass Reference

переменные

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

$ точек останова

Это имя точки останова, которое можно использовать для написания медиазапросов с помощью функции breakpoint () mixin.

маленький: 0px

средний: 640 пикселей

большой: 1024 пикселей

xlarge: 1200px

xxlarge: 1440px

$ точек останова-классы

Вы можете изменить вывод класса CSS, изменив переменную $ breakpoint-classes .

Примеси

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

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

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

• Если строка передана, то mixin ищет строку на карте $ breakpoints и создает медиа-запрос.

• Если вы используете значение в пикселях, то конвертируйте его в значение em, используя $ rem-base .

• Если передается значение rem, оно меняет свой блок на em.

• Если вы используете значение em, его можно использовать как есть.

Если строка передана, то mixin ищет строку на карте $ breakpoints и создает медиа-запрос.

Если вы используете значение в пикселях, то конвертируйте его в значение em, используя $ rem-base .

Если передается значение rem, оно меняет свой блок на em.

Если вы используете значение em, его можно использовать как есть.

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

$ значение

Он обрабатывает значения с использованием значений имени точки останова, px, rem или em.

функции

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

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

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

$ Вэл

Он обрабатывает значения с использованием значений имени точки останова, px, rem или em.

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

функции

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

• .atLeast — проверяет экран. Он должен быть широким, по крайней мере, как точка останова.

• .get — Используется для получения медиа-запроса точки останова.

.atLeast — проверяет экран. Он должен быть широким, по крайней мере, как точка останова.

.get — Используется для получения медиа-запроса точки останова.

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

размер

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