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