Fundação - Consultas de mídia

Consultas de mídia são módulos CSS3 que incluem recursos de mídia, como largura, altura, cor e exibe o conteúdo de acordo com a resolução de tela especificada.

O Foundation usa as seguintes consultas de mídia para criar intervalos de detalhamento -

Small - Usado para qualquer tela.
Medium - É usado para telas de 640 pixels ou mais.
Large - É usado para telas de 1024 pixels e mais largas.

Você pode alterar o tamanho da tela usando as classes de ponto de interrupção . Por exemplo, você pode usar a classe .small-6 para telas de tamanho pequeno e a classe .medium-4 para telas de tamanho médio, conforme mostrado no seguinte snippet de código -

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

Mudando os Breakpoints

Você pode alterar os pontos de interrupção, se seu aplicativo usar a versão SASS do Foundation. Você pode colocar o nome dos pontos de interrupção sob a variável $ breakpoints no arquivo de configurações, conforme mostrado abaixo -

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

Você pode alterar as classes dos pontos de interrupção no arquivo de configurações, modificando a variável $ breakpoint-classes . Se você quiser usar a classe .large no CSS, adicione-a ao final da lista como mostrado abaixo -

$breakpoints-classes: (small medium large);

Suponha que você queira usar a classe .xlarge no CSS e, em seguida, adicionar essa classe ao final da lista, conforme mostrado abaixo -

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

SASS

The Breakpoint Mixin

Você pode escrever as consultas de mídia usando o mixin breakpoint () junto com @include .
Use as palavras-chave para baixo ou somente junto com o valor do ponto de interrupção para alterar o comportamento da consulta de mídia, conforme mostrado no seguinte formato de código -

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

Você pode usar três consultas de mídia retrato , paisagem e retina para orientação do dispositivo ou densidade de pixels e não são consultas de mídia baseadas em largura.

Função Breakpoint

Você pode usar a funcionalidade do mixin breakpoint () usando a função interna.
A funcionalidade breakpoint () pode ser usada diretamente para escrever suas próprias consultas de mídia -

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

JavaScript

Trabalho com consultas de mídia

O Foundation JavaScript fornece a função MediaQuery.current para acessar o nome do ponto de interrupção atual no objeto Foundation.MediaQuery conforme especificado abaixo -

Foundation.MediaQuery.current

A função MediaQuery.current exibe pequenos , médios e grandes como nomes de ponto de interrupção atuais.
Você pode obter a consulta de mídia do ponto de interrupção usando a função MediaQuery.get conforme mostrado abaixo -

Foundation.MediaQuery.get('small')

Referência Sass

Variáveis

A tabela a seguir lista as variáveis SASS, que podem ser usadas para personalizar os estilos padrão do componente -

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$breakpoints É um nome de ponto de interrupção que pode ser usado para escrever as consultas de mídia usando o mixin de breakpoint () .	Mapa	pequeno: 0px meio: 640px grande: 1024 px xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes Você pode alterar a saída da classe CSS modificando a variável $ breakpoint-classes .	Lista	pequeno médio grande

Mixins

Mixins cria um grupo de estilos para construir sua estrutura de classes CSS para os componentes Foundation.

BREAKPOINT

Ele usa o mixin breakpoint () para criar consultas de mídia e inclui as seguintes atividades -

Se string for passada, o mixin pesquisa a string no mapa de $ breakpoints e cria a consulta de mídia.
Se você estiver usando o valor do pixel, converta-o para o valor em usando $ rem-base .
Se o valor rem for passado, ele muda sua unidade para em.
Se você estiver usando o valor em, ele poderá ser usado como está.

A tabela a seguir especifica o parâmetro usado pelo ponto de interrupção -

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$value Ele processa os valores usando o nome do ponto de interrupção, valores px, rem ou em.	palavra-chave ou número	Nenhum

Funções

BREAKPOINT

Ele usa o mixin breakpoint () para criar consultas de mídia com valores de entrada correspondentes.

A tabela a seguir especifica o valor de entrada possível usado pelo ponto de interrupção -

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$val Ele processa os valores usando o nome do ponto de interrupção, valores px, rem ou em.	palavra-chave ou número	pequeno

Referência de JavaScript

Funções

Existem dois tipos de funções -

.atLeast- Ele verifica a tela. Deve ser amplo, pelo menos como um ponto de interrupção.
.get - É usado para obter a consulta de mídia do ponto de interrupção.

A tabela a seguir especifica o parâmetro usado pelas funções acima -

Sr. Não.	Nome e Descrição	Tipo
1	size Ele verifica e obtém o nome do ponto de interrupção para as funções especificadas, respectivamente.	Corda