Wie mach ich das ???

Ein responsives Design lässt sich auf die drei Arten, hier beschrieben, bewerkstelligen.
Es gibt jedoch unterschiede, wie man diese Arten umsetzen kann.

Über CSS

Nur bei adaptiven und liquiden Webseiten möglich.

Media Queries im HTML [1]

<head>
 <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="pfad/zur/css-datei/für/handys.css">
</head>

Wie oben erkennbar, wird die CSS-Datei nur benutzt wenn die Bildschirmbreite unter 480px ist.
Das Bringt natürlich einige limitierungen mit sich.
Man kann hier Regeln schreiben, die nur ab 480px abwärts aktiv sind.
Man kann nicht mischen und muss beim programmieren immer zwischen den Dateien hin und her gehen.

Hinzuzufügen ist auch, dass diese Methode eine höhere Datenlast ist und mehr Dateien herunterlädt,
auch wenn das Gerät über die angegebene Bedingung nicht erfüllt.

Media Queries in CSS [1]

.css-klasse {
 color: #000000;
}

@media screen and (max-width: 480px) {
 .css-klasse {
  color: #ffffff;
 }
}

In diesem Beispiel bekommt die CSS-Klasse css-klasse ab 480px abwärts eine weiße Schrift.
Hier wird direkt in der CSS-Datei bestimmt wann welche Regeln aktiv sind.

Diese Methode wird von den meisten Webseiten verwendet,
weil hier in nur einer Datei die ganze Webseite gestylt wird.
Es ist demnach weniger Datenlast.

Über JavaScript

Hier ist ein Beispiel von einer möglichen adaptiven Webseite.

const element = document.getElementById('some-id');

if(window.innerWidth <= 480) {
 element.classList.add('mobile');
} else {
 element.classList.remove('mobile');
}

window.onresize = function() {
 if(window.innerWidth <= 480) {
  element.classList.add('mobile');
 } else {
  element.classList.remove('mobile');
 }
}

In diesem Beispiel wird dem Element mit der id some-id bei einer Bildschirmbreite von unter 480px die CSS-Klasse mobile gegeben.
Wenn die Bildschirmbreite über 480px ist wird sie wieder entzogen.

Auch hier wird in der Webseite eine Datei eingebunden,
die wieder mehr Datenlast verursacht.