Fondazione - Media Queries

Le query multimediali sono moduli CSS3 che includono funzionalità multimediali come larghezza, altezza, colore e visualizzano il contenuto secondo la risoluzione dello schermo specificata.

Foundation utilizza le seguenti media query per creare intervalli di suddivisione:

  • Small - Utilizzato per qualsiasi schermo.

  • Medium - Viene utilizzato per schermi di 640 pixel e più grandi.

  • Large - Viene utilizzato per schermi di 1024 pixel e più grandi.

È possibile modificare le dimensioni dello schermo utilizzando le classi di punti di interruzione . Ad esempio, puoi usare .small-6 class per schermi di piccole dimensioni e .medium-4 class per schermi di medie dimensioni come mostrato nel seguente frammento di codice:

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

Modifica dei punti di interruzione

È possibile modificare i punti di interruzione, se l'applicazione utilizza la versione SASS di Foundation. È possibile inserire il nome dei punti di interruzione sotto la variabile $ punti di interruzione nel file delle impostazioni come mostrato di seguito:

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

È possibile modificare le classi dei punti di interruzione nel file delle impostazioni modificando la variabile $ breakpoint-classes . Se vuoi usare la classe .large nel CSS, aggiungila alla fine dell'elenco come mostrato di seguito -

$breakpoints-classes: (small medium large);

Supponiamo di voler utilizzare la classe .xlarge nel CSS, quindi aggiungere questa classe alla fine dell'elenco come mostrato di seguito -

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

SASS

Il Breakpoint Mixin

  • È possibile scrivere le media query utilizzando breakpoint () mixin insieme a @include .

  • Utilizza le parole chiave in basso o solo insieme al valore del punto di interruzione per modificare il comportamento della media query come mostrato nel seguente formato di codice:

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

È possibile utilizzare tre dei media query ritratto , paesaggio e della retina per l'orientamento del dispositivo o densità di pixel e non sono la larghezza base media query.

Funzione breakpoint

  • È possibile utilizzare la funzionalità di breakpoint () mixin utilizzando la funzione interna.

  • La funzionalità breakpoint () può essere utilizzata direttamente per scrivere le proprie media query -

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

JavaScript

Lavorare con le media query

  • Il JavaScript Foundation fornisce la funzione MediaQuery.current per accedere al nome del punto di interruzione corrente sull'oggetto Foundation.MediaQuery come specificato di seguito:

Foundation.MediaQuery.current

  • La funzione MediaQuery.current visualizza piccoli , medi , grandi come nomi dei punti di interruzione correnti.

  • È possibile ottenere la media query del punto di interruzione utilizzando la funzione MediaQuery.get come mostrato di seguito:

Foundation.MediaQuery.get('small')

Riferimento Sass

Variabili

La tabella seguente elenca le variabili SASS, che possono essere utilizzate per personalizzare gli stili predefiniti del componente:

Sr.No. Nome e descrizione genere Valore predefinito
1

$breakpoints

È un nome di punto di interruzione che può essere utilizzato per scrivere le query multimediali utilizzando breakpoint () mixin.

 Carta geografica

piccolo: 0px

medio: 640 px

grande: 1024 px

xlarge: 1200px

xxlarge: 1440px
2

$breakpoint-classes

Puoi cambiare l'output della classe CSS modificando la variabile $ breakpoint-classes .

 Elenco piccolo medio grande

Mixins

Mixins crea un gruppo di stili per costruire la struttura della classe CSS per i componenti Foundation.

BREAKPOINT

Utilizza breakpoint () mixin per creare query multimediali e include le seguenti attività:

  • Se viene passata stringa, mixin ricerca la stringa nella mappa $ breakpoints e crea la media query.

  • Se stai usando il valore pixel, convertilo in valore em usando $ rem-base .

  • Se viene passato il valore rem, cambia la sua unità in em.

  • Se stai usando il valore em, allora può essere usato così com'è.

La tabella seguente specifica il parametro utilizzato dal punto di interruzione:

Sr.No. Nome e descrizione genere Valore predefinito
1

$value

Elabora i valori utilizzando il nome del punto di interruzione, i valori px, rem o em.

 parola chiave o numero Nessuna

Funzioni

BREAKPOINT

Utilizza breakpoint () mixin per creare query multimediali con valore di input corrispondente.

La tabella seguente specifica il possibile valore di input utilizzato dal breakpoint -

Sr.No. Nome e descrizione genere Valore predefinito
1

$val

Elabora i valori utilizzando il nome del punto di interruzione, i valori px, rem o em.

 parola chiave o numero piccolo

Riferimento JavaScript

Funzioni

Esistono due tipi di funzioni:

  • .atLeast- Controlla lo schermo. Deve essere ampio almeno come punto di interruzione.

  • .get - Viene utilizzato per ottenere la media query del punto di interruzione.

La tabella seguente specifica il parametro utilizzato dalle funzioni precedenti:

Sr.No. Nome e descrizione genere
1

size

Controlla e ottiene il nome del punto di interruzione rispettivamente per le funzioni specificate.

 Corda