Strona główna › Pytania INF.03 › Pytanie 898
INF.03 · pytanie #898
Aby utworzyć styl strony responsywnej dla ekranów o szerokości od 600 px do 800 px należy zastosować regułę CSS
- A@media (min-width: 800px){/*style css*/}
- B@media (max-width: 800px) (min-width: 600px){/*style css*/}
- C@media screen and (max-width: 800px) and (min-width: 600px){/*style css*/}
- D@media screen (min-width: 800px) and (max-width: 600px){/*style css*/}
Poprawna odpowiedź: C. @media screen and (max-width: 800px) and (min-width: 600px){/*style css*/}
Kliknij odpowiedź, którą uważasz za poprawną.
Wyjaśnienie
Prawidłowa reguła to @media screen and (max-width: 800px) and (min-width: 600px){/*style css*/}, bo dokładnie określa zakres szerokości ekranu od 600 px do 800 px i robi to w sposób zgodny ze składnią CSS. Kluczowe są tu trzy elementy: słowo kluczowe screen, operator and oraz poprawna kolejność i zapis warunków min-width i max-width. Media queries działają tak, że przeglądarka sprawdza, czy wszystkie warunki połączone słowem and są spełnione. W tym przypadku styl zadziała tylko wtedy, gdy typ urządzenia to ekran (screen) i szerokość widoku (viewport) jest jednocześnie nie mniejsza niż 600 px i nie większa niż 800 px. To jest właśnie typowy zapis tzw. przedziału (range) w responsywnym CSS. W praktyce taki zakres wykorzystuje się np. do stylowania widoków tabletów w pozycji pionowej lub poziomej, w zależności od projektu. Możesz tam zmieniać układ kolumn z trzech na dwie, powiększać przyciski, dostosowywać rozmiary czcionek, marginesy, czy ukrywać mniej ważne elementy. Co ważne, użycie screen ogranicza stosowanie tych styli tylko do ekranów, a nie np. do wydruku (print), co jest zgodne z dobrą praktyką opisaną w specyfikacji CSS Media Queries Level 3 i nowszych. Z mojego doświadczenia dobrym nawykiem jest zawsze pilnować spójnych breakpointów, np. 480 px, 600 px, 768 px, 1024 px, i dla każdego z nich pisać media queries w dokładnie takim formacie, jak w tej poprawnej odpowiedzi. Ułatwia to późniejsze utrzymanie kodu i eliminuje dziwne „przeskoki” layoutu między rozdzielczościami. Dodatkowo warto pamiętać, że kolejność min-width i max-width nie ma znaczenia dla działania, ale przyjęcie jednej konwencji w projekcie mocno poprawia czytelność kodu zespołowego.
🤖 Wyjaśnienie generowane przez AI – weryfikuj w oficjalnych źródłach.