Fundacja - zapytania o media

Zapytania o media to moduł CSS3, który zawiera funkcje multimedialne, takie jak szerokość, wysokość, kolor i wyświetla zawartość zgodnie z określoną rozdzielczością ekranu.

Foundation używa następujących zapytań o media do tworzenia zakresów podziału -

Small - Używany na dowolnym ekranie.
Medium - Jest używany do ekranów o rozdzielczości 640 pikseli i szerszych.
Large - Jest używany do ekranów o rozdzielczości 1024 pikseli i szerszych.

Możesz zmienić rozmiar ekranu za pomocą klas punktów przerwania . Na przykład, możesz użyć .small-6 class dla małych ekranów i .medium-4 class dla średnich ekranów, jak pokazano w poniższym fragmencie kodu -

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

Zmiana punktów przerwania

Możesz zmienić punkty przerwania, jeśli Twoja aplikacja korzysta z wersji Foundation SASS. Możesz umieścić nazwę punktów przerwania pod zmienną $ przerwania punktów w pliku ustawień, jak pokazano poniżej -

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

Możesz zmienić klasy punktów przerwania w pliku ustawień, modyfikując zmienną $ breakpoint-classes . Jeśli chcesz użyć klasy .large w CSS, dodaj ją na końcu listy, jak pokazano poniżej -

$breakpoints-classes: (small medium large);

Załóżmy, że chcesz użyć klasy .xlarge w CSS, a następnie dodaj tę klasę na końcu listy, jak pokazano poniżej -

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

SASS

Mixin punktów przerwania

Zapytania o media można pisać, używając mixin breakpoint () wraz z @include .
Użyj nieaktywnych lub tylko słów kluczowych wraz z wartością punktu przerwania, aby zmienić zachowanie zapytania o media, jak pokazano w następującym formacie kodu -

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

Możesz użyć trzech zapytań o media: pionowej , poziomej i siatkówkowej, aby określić orientację urządzenia lub gęstość pikseli. Nie są to zapytania o media oparte na szerokości.

Funkcja punktu przerwania

Możesz użyć funkcji breakpoint () mixin, używając funkcji wewnętrznej.
Przerwania () funkcjonalność może być stosowany bezpośrednio do pisania własnych zapytań o media -

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

JavaScript

Praca z zapytaniami o media

JavaScript Foundation zapewnia funkcję MediaQuery.current w celu uzyskania dostępu do bieżącej nazwy punktu przerwania w obiekcie Foundation.MediaQuery, jak określono poniżej -

Foundation.MediaQuery.current

Funkcja MediaQuery.current wyświetla małe , średnie i duże jako bieżące nazwy punktów przerwania.
Możesz uzyskać zapytanie o media dotyczące punktu przerwania za pomocą funkcji MediaQuery.get, jak pokazano poniżej -

Foundation.MediaQuery.get('small')

Sass Reference

Zmienne

W poniższej tabeli wymieniono zmienne SASS, których można użyć do dostosowania domyślnych stylów komponentu -

Sr.No.	Nazwa i opis	Rodzaj	Domyślna wartość
1	$breakpoints Jest to nazwa punktu przerwania, której można używać do pisania zapytań o media za pomocą mixin breakpoint () .	Mapa	mały: 0px średni: 640px duży: 1024px xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes Możesz zmienić dane wyjściowe klasy CSS, modyfikując zmienną $ breakpoint-classes .	Lista	mały średni duży

Mieszanki

Mixins tworzy grupę stylów, aby zbudować strukturę klas CSS dla składników Foundation.

BREAKPOINT

Wykorzystuje mixin breakpoint () do tworzenia zapytań o media i obejmuje następujące działania -

Jeśli przekazano ciąg, to mixin przeszukuje ciąg w mapie $ przerwania i tworzy zapytanie o media.
Jeśli używasz wartości pikseli, przekonwertuj ją na wartość em za pomocą $ rem-base .
Jeśli przekazana jest wartość rem, zmienia swoją jednostkę na em.
Jeśli używasz wartości em, możesz jej użyć tak, jak jest.

W poniższej tabeli określono parametr używany przez punkt przerwania -

Sr.No.	Nazwa i opis	Rodzaj	Domyślna wartość
1	$value Przetwarza wartości przy użyciu nazwy punktu przerwania, wartości px, rem lub em.	słowo kluczowe lub liczba	Żaden

Funkcje

BREAKPOINT

Używa funkcji breakpoint () do tworzenia zapytań o media z dopasowaną wartością wejściową.

W poniższej tabeli określono możliwą wartość wejściową używaną przez punkt przerwania -

Sr.No.	Nazwa i opis	Rodzaj	Domyślna wartość
1	$val Przetwarza wartości przy użyciu nazwy punktu przerwania, px, rem lub wartości em.	słowo kluczowe lub liczba	mały

Dokumentacja JavaScript

Funkcje

Istnieją dwa rodzaje funkcji -

.atLeast- Sprawdza ekran. Musi być szeroki co najmniej jako punkt przerwania.
.get - Służy do pobierania zapytania o media punktu przerwania.

Poniższa tabela określa parametr używany przez powyższe funkcje -

Sr.No.	Nazwa i opis	Rodzaj
1	size Sprawdza i pobiera nazwę punktu przerwania odpowiednio dla określonych funkcji.	Strunowy