Typowa strona internetowa składa się z wielu plików (każda podstrona – strona główna, strona o nas, oferta itp. – jest pojedynczym plikiem). Każdy plik zawiera kod HTML i zawartość w postaci tekstu i obrazów. Strony internetowe są stylizowane za pomocą plików zwanych kaskadowymi arkuszami stylów (CSS). Pliki CSS określają wygląd i projekt Twojej witryny, a pliki HTML określają zawartość.
Dla uproszczenia załóżmy, że standardowa strona internetowa (nie responsywna) składa się z zestawu plików i kilku plików CSS, które określają wygląd strony. Strona responsywna stosuje inne zasady niż w pliku CSS w zależności od urządzenia, z którego uzyskuje się dostęp do strony. Strona różni się wyglądem i „reakcją” w zależności od urządzenia.
Przykład: jeśli odwiedzasz witrynę z komputera stacjonarnego, zobaczysz menu nawigacyjne zorientowane poziomo, podczas gdy z urządzenia mobilnego zobaczysz menu zorientowane pionowo (tzw. hamburger menu) z większym tekstem, który łatwiej przeczytać na mniejszych ekranach smartfonów i tabletów.
Responsywne projektowanie stron internetowych działa z kaskadowymi arkuszami stylów (CSS). Korzystanie z różnych ustawień w celu zastosowania różnych właściwości stylu w zależności od rozmiaru ekranu, orientacji, rozdzielczości, możliwości kolorów i innych cech urządzenia użytkownika.
CSS oferuje twórcom stron internetowych różne opcje sprawdzania rozmiaru ekranu, rozmiaru okna przeglądarki i rozdzielczości z urządzeń końcowych odwiedzających witrynę oraz definiowania specjalnych zasad układu wyświetlania dla odpowiednich rozdzielczości i rozmiarów ekranu.