Aby zastosować styl responsywny dla ekranów o szerokości od 600 px do 800 px, należy użyć reguły CSS:
Źle. To obejmie ekrany od 800 px wzwyż, a nie zakres 600-800 px.
Źle. Warunek jest sprzeczny (min 800 i max 600) i brak
and po screen.Dobrze. Warunek obejmuje szerokości jednocześnie ≤ 800 px i ≥ 600 px, czyli 600-800 px.
Źle. Brakuje operatora
and między warunkami - zapis jest błędny.Aby ograniczyć styl do zakresu szerokości, łączy się dwa warunki operatorem
and: @media screen and (min-width: 600px) and (max-width: 800px) { }. Pierwszy ustala dolną granicę (≥ 600 px), drugi górną (≤ 800 px); spełnione muszą być oba naraz. Dlatego poprawna jest reguła z max-width: 800px i min-width: 600px połączonymi and.Pozostałe zapisy są błędne lub obejmują inny zakres. Wariant z samym
min-width: 800px dotyczy ekranów od 800 px w górę, więc pomija większość żądanego przedziału. Zapis z dwoma nawiasami warunków bez and jest składniowo nieprawidłowy - media queries wymagają operatora łączącego. Wersja z min-width: 800px i max-width: 600px stawia warunek sprzeczny (nic nie jest jednocześnie ≥ 800 i ≤ 600) i dodatkowo gubi and po screen. Zakres 600-800 px poprawnie opisuje reguła łącząca min-width: 600px i max-width: 800px operatorem and.