Generator zapytań mediów widoku
Generuj zapytania mediów CSS dla responsywnego projektowania stron internetowych.
Ustawienia zapytań mediów
Skonfiguruj warunki zapytań mediów
Warunek 1
Predefiniowane
Wybierz często używane wzorce zapytań mediów
Wygenerowany CSS
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}Typowe punkty przerwania
Mobilne:
max-width: 480pxTablet:
481px - 768pxKomputer stacjonarny:
min-width: 1024pxDuży komputer stacjonarny:
min-width: 1200pxPrzewodnik po zapytaniach mediów
Kluczowe cechy mediów
- • width/height: Szerokość/wysokość widoku
- • min-width/max-width: Warunki minimalnej/maksymalnej szerokości
- • orientation: Orientacja ekranu (pionowa/pozioma)
- • resolution: Rozdzielczość ekranu (wyświetlacze retina itp.)
- • hover: Obsługa funkcji najechania kursorem
- • pointer: Precyzja wskaźnika (dotyk/mysz)
Wskazówki dotyczące użytkowania
- • Podejście Mobile First: Użyj min-width do projektowania od małych ekranów
- • Łącz złożone warunki za pomocą operatorów logicznych
- • Użyj typu mediów print dla oddzielnych stylów drukowania
- • Użyj resolution dla obsługi wyświetlaczy o wysokiej rozdzielczości