header

Responsive Gestaltung

Admin24 post on April 29th, 2016
Posted in CMS ohne Datenbank

Letztes mal habe wir den “meta-tag“ angeschaut, wo genau der Befehl hin kommt, heute werde ich Ihnen erklären wie der Befehl richtig genutzt wird. Ich habe zuerst mal getestet ob der Befehl überhaupt stimmt. Wie ging ich vor ? Erstellen Sie eine CSS Datei, benennen Sie diese auf “responsive.css“. Da werden alle befehle mitgeteilt, z.B wie die Navi auf mobile Geräten aussehen soll. Diese erstellte Datei muss im „template.php“ verlinkt werden.

Bild 19

Der Link beschreibt wo genau die Datei befindet.

 

 

 

 

Nun öffnen Sie die “responsive.css“, zuerst wollen wir ja testen ob der Befehl richtig eingegeben wurde. Sobald Sie es geöffnet haben,Bild 4

geben Sie die Befehle ein, was im rechten Bild steht. Der oberste Befehl sagt, wenn der Bildschirm kleiner ist als 960px sollen die Befehle akzeptiert werden. Dieser Befehl wird immer benötigt, natürlich gibt es viele verschiedene Codes die denselben wirkung haben aber dan sind Sie eventuell Komplexer. Ich habe den Test so weieter geführt, habe dem Body die farbe Grün gegeben (Body Codeauch im Bild zu erkennen) . Unten zu sehen, das erste Bild wen das Fenster Grösser als 960px ist hat der Befehl keine Funktion. Und beim zweiten Bild erkennt man wen das Fenster kleiner als 960px ist, wird der Befehl eingesetzt.

Bild 2Bild 3

 

 

 

Share

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload CAPTCHA.