Themen

Responsive Webdesign
Das komplette Kapitel durchgemacht: http://www.w3schools.com/css/css_rwd_intro.asp

Hausaufgabe

Grandhotel (Übung vom 24. Mai 2016) responsive machen. So viele Breakpoints setzen wie gewollt.

Aufgabe auf der Lernplattform: Responsive Design

Nimm das Projekt „Grandhotel“ und gestalte den Webauftritt so um, dass er responsive ist.

Es sollten dann die drei nebeneinander liegenden Inhaltsblöcke untereinander liegen. Bei Überschreiten einer bestimmten Bildschirmauflösung sollen die drei Blöcke dann nebeneinander liegen.

Zum Nachlesen und ausprobieren: http://www.w3schools.com/css/css_rwd_intro.asp

Am Beginn der nächsten Einheit dürfen dann drei von euch ihre Lösung vorstellen.

Viel Spaß

Inhaltsverzeichnis

Grandhotel
Schritt 1
Schritt 2

Grandhotel

Bei dieser Übung modifizieren wir den Code des bereits vorhandenen Grandhotel-Beispiels. Wie die Seite Grandhotel aufgebaut werden muss, könnt ihr hier nachlesen: Berufsmatura: 24. Mai 2016 (Grandhotel)

Schritt 1: Meta Tag hinzufügen

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ergebnis: index.html

Der grüne Text ist der Teil, den wir der bereits vorhandenen index.html in diesem Schritt hinzugefügt haben.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grandhotel</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Grandhotel</h1>
  <div class="bild1"><img src="lobby.jpg" alt="Lobby"></div>
  <div class="text">Die Lobby</div>
  <div class="bild2"><img src="lobby.jpg" alt="Lobby"></div>
</body>
</html>

Schritt 2: Media Query in style.css

@media screen and (Eigenschaft: Wert) {
  Selector {
     Eigenschaft: Wert;
  }
}

Beispiel:

@media screen and (max-width: 960px) {
  .text, h1, .bild1, .bild2 {
     position: relative;
  }
}

Ergebnis: style.css (Beispiel)

body {
    font-family: Verdana, sans-serif;
    background-color: #400000;
    text-align: center;
}

/* und der restliche Code...

Hier ein Beispielcode für die responsive Darstellung */

@media only screen and (max-width: 960px) {
    h1, .bild1, .text, .bild2 {
	position: relative;
	width: 90%;
	margin: 0 auto;
	left:0;
	right: 0;
    }

    .bild1, .bild2 {
	width: 200px;
	margin: -10px auto 0 auto;
    }
}

max-width vs. min-width

Demonstration zum Verständnis des Unterschiedes (Bitte auf „edit on codepen“ klicken!)

See the Pen max-width/min-width demonstration by Jennifer (@Smettbonia) on CodePen.

Berufsmatura: 31. Mai 2016