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