Aby utworzyć styl strony responsywnej dla ekranów o szerokości od 600 px do 800 px należy zastosować regułę CSS

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.