Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

W tym zadaniu cała trudność kręci się wokół poprawnego zapisania media queries i zrozumienia, jak działają warunki min-width oraz max-width. Wiele osób intuicyjnie czuje, o co chodzi z responsywnością, ale potyka się na szczegółach składni, a przeglądarka niestety jest bardzo „zero-jedynkowa” i najmniejszy błąd powoduje, że reguła po prostu nie zadziała. Jedno z podejść polega na użyciu tylko min-width, np. @media (min-width: 800px){...}. Taki zapis oznacza jednak: stosuj te style dla szerokości 800 px i większych, czyli w górę, bez żadnej górnej granicy. To jest typowy breakpoint dla większych ekranów, np. laptopów, a nie dla przedziału 600–800 px. To nie jest logicznie to, o co chodziło w pytaniu, bo nie ma tu żadnego ograniczenia od góry. Inny typ błędu to próba połączenia max-width i min-width bez słowa and, jak w @media (max-width: 800px) (min-width: 600px){...}. Taka składnia jest po prostu niepoprawna z punktu widzenia specyfikacji CSS – między warunkami musi wystąpić operator logiczny and, not lub only. Bez tego parser traktuje zapis jako błąd, więc reguła zostanie zignorowana. Kolejna pułapka to pomieszanie kolejności i logiki warunków, np. @media screen (min-width: 800px) and (max-width: 600px){...}. Tutaj po pierwsze brakuje and po słowie screen, więc typ medium nie jest poprawnie połączony z warunkami, a po drugie zakres jest nielogiczny: min-width: 800px i max-width: 600px tworzą zestaw warunków, którego żaden ekran nie spełni, bo nie może mieć jednocześnie szerokości co najmniej 800 px i maksymalnie 600 px. W praktyce oznacza to media query, które nigdy się nie aktywuje. To zresztą typowy błąd: ktoś zna pojęcia min i max, ale nie zastanawia się nad realnym przedziałem wartości. Dobra praktyka w responsywnym projektowaniu to zawsze sprawdzić: czy zakres ma sens matematyczny, czy składnia zawiera wszystkie konieczne słowa kluczowe (screen, and), oraz czy zapis jest spójny z resztą kodu. Wtedy media queries stają się przewidywalne i łatwiejsze do debugowania w narzędziach deweloperskich przeglądarki.