aby wdrożyć responsive Web design, ważne jest, aby zrozumieć zapytania dotyczące mediów w CSS, zwłaszcza tylko dla mediów i media screen queries.

zacznijmy od oczywistego pytania.

Co to jest Zapytanie o media?

Zapytanie o media to technika, która została wprowadzona w CSS3. Zapytanie polega na użyciu reguły @ media do uruchomienia bloku właściwości CSS w przypadku, gdy z góry określony warunek jest prawdziwy.

na przykład poniższy kod nakazuje, że jeśli okno przeglądarki ma 400px lub mniej, kolor tła będzie jasnozielony:

@media only screen and (max-width: 400px) {
body {
Background-color: lightgreen;
}
}

zapytania o Media są szczególnie pomocne przy dodawaniu punktów przerwania dla responsywnego projektu. Ponieważ punkty przerwania są zasadniczo liczbami pikseli, przy których zawartość lub projekt wyglądają inaczej dla użytkowników, zapytania o media są używane do określania zmian, przy których pikselach muszą wystąpić.

w poniższym przykładzie kod wskazuje, że jeśli okno przeglądarki zostanie zmniejszone poniżej 600px, szerokość każdej kolumny powinna wynosić 100%:

/* dla pulpitu: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@ media only screen and (max-width: 600px) {
/* dla telefonów komórkowych: */
{
width: 100%;
}
}

każde zapytanie o media Składa się z opcjonalnego typu mediów i jednego lub więcej wyrażeń funkcji mediów. Możliwe jest łączenie wielu zapytań o media z operatorami logicznymi. Wszystkie zapytania dotyczące mediów uwzględniają wielkość liter.

każde zapytanie o media jest uważane za prawdziwe, gdy określony typ nośnika pasuje do urządzeń, na których wyświetlana jest strona internetowa. Ponadto wyrażenia funkcji mediów muszą również być prawdziwe.

Co to jest zapytanie media-screen?

zapytanie @media screen oznacza po prostu, że zapytanie jest przeznaczone dla kolorowych ekranów lub urządzeń obsługujących tryb „screen”.

weźmy przykład:

@media screen i (max-width:500px)

powyższe zapytanie dotyczy ekranów o maksymalnej szerokości 500 pikseli. Chodzi głównie o to, aby skierować kod do rozróżnienia między „ekranem” a innymi typami nośników (takimi jak druk, braille, tłoczenie, handheld itp.).

Co to jest zapytanie tylko dla mediów?

dodając operator logiczny 'only’ do zapytania media, programista zapewnia, że zapytanie zostanie zastosowane tylko wtedy, gdy cały warunek pasuje. Jeśli nie używasz tylko, starsze przeglądarki mogą nie odczytywać lub interpretować wszystkich wyrażeń funkcji multimedialnych. Na przykład, jeśli zapytanie to

@media screen i (max-width:500px)

starsze przeglądarki mogą interpretować zapytanie jako tylko screen i ignorować liczbę pikseli. Prowadziłoby to do zastosowania warunku zapytania na wszystkich ekranach. Aby temu zapobiec, możesz użyć:

@media only screen and (max-width:500px)

podczas korzystania z jedynego operatora należy podać typ nośnika.

znaczenie w responsywnym projektowaniu

Media queries są kluczowe w implementacji responsywnego projektowania stron internetowych. Zapytania omówione powyżej są dwoma najczęściej używanymi i są pomocne w zapewnieniu, że zawartość witryny jest zoptymalizowana pod kątem rozmiarów i typów urządzeń.

Po użyciu zapytań CSS na swojej stronie, należy zweryfikować ich skuteczność. Najprostszym sposobem na to jest użycie narzędzia, które pozwala przetestować projekt witryny na prawdziwych urządzeniach i przeglądarkach. Istnieje wiele narzędzi, które to ułatwiają, ale nie spiesz się, aby znaleźć responsywny kontroler online, który daje możliwość przetestowania na wystarczająco szerokiej gamie urządzeń — zarówno stacjonarnych, jak i mobilnych.