Strona aplikacji internetowej ma wyświetlać kafelki produktów w jednej kolumnie na telefonach, a w trzech kolumnach na ekranach o szerokości co najmniej 1024 px. Jakim mechanizmem należy to zrealizować?

Dlaczego tak

Zapytania o media, np. @media (min-width: 1024px), pozwalają zmienić reguły CSS zależnie od szerokości okna — w nich ustawia się siatkę z jedną albo trzema kolumnami. To podstawa projektowania responsywnego. Znacznik meta viewport jest potrzebny, by telefon nie skalował strony jak dla komputera, ale sam nie zmienia liczby kolumn. Rozpoznawanie urządzenia po nazwie przeglądarki jest zawodne i wymaga utrzymywania kilku wersji strony.