Relative Werte, responsive Programmierung

Relative Werte, einfacher Weg zur responsiven Website

Um für alle Anzeigegeräte zu programmieren, ist diese Technik eine gute und wichtige Grundlage.

Funktionsweise

Relative Werte werden in die CSS-Datei eingegeben und alternativ zu den fixen Werten, zum Beispiel 10 Pixel, verwenden wir Werte, die sich nach der Anzeige richten und keine feste Größe besitzen.
Folgende Werte kann man hier als Beispiel verwenden und spart sich dadurch erheblich viel Code, zu der Variante mit px:
vw = Viewportwidth, vh = Viewportheight, em = Schriftgröße, % = Prozent

Den in meinem Video verwendeten Code könnt ihr hier kopieren und es selbst probieren:
Hier der Code aus der HTML-Datei:

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<link rel=”stylesheet” href=”relative-werte.css”>
</head>
<body>
<header>
</header>
<main>
<div>
</div>
<h1>Beispiel für relative Werte</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div>
</div>
<img src=”relative-werte.jpg” alt=”Lrelative Werte” title=”relative Werte Image”>
<div>
</div>
</main>
<footer >
</footer>
</body>
</html>

Hier der Code aus der CSS:

/*RESET*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.beispiel1{
height: 2em;
/*für relative Breite % Angabe verwenden*/
width: 60%;
margin-left: 20%;
margin-top: 2vh; /*höhe des Viewport*/
margin-bottom: 4vh; /*höhe des Viewport*/
background-color: green;
}
.beispiel2{
height: 1em;
width: 100%;
background-color: blue;
}
.beispiel3{
height: 20em;
width: 80%;
margin-left: 10%;
background-color: red;
}
.relativeimg{
width: 50%;
/* alternativ zum Bsp. width: 50vw; vw = viewport-Breite*/
}
/*für relative Größe in Schriften vw Angabe verwenden*/
h1{
font-size:5vw;
}
p{
font-size:3vw;
}

Alternativ findet ihr den Code zum Video unter:
HTML5:

https://gist.github.com/kb-media/ba64…

CSS3

https://gist.github.com/kb-media/414d…
Mehr Angaben zu fixen Werten und relativen Werten findet ihr hier:
https://wiki.selfhtml.org/wiki/CSS/We…
Ich hoffe, mein Video, die Links und die grobe Anleitung haben euch gefallen und bringen euch weiter bei eurem Projekt. ????
Ein weiteres wichtiges Thema werde ich demnächst auch noch aufgreifen und das sind die Breakpoints.
Schreibt mir gerne eine Nachricht oder Kommentar, wenn ihr Fragen habt oder etwas unklar geblieben ist.
Viele Grüße aus Hamburg
Karsten

, , , , , , ,

Comment (1)

  1. Johng348

    I truly appreciate this post. I’ve been looking everywhere for this! Thank goodness I found it on Bing. You’ve made my day! Thank you again! cecaegefkbcd

Schreibe einen Kommentar

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

Kontaktdaten

Melden Sie mich bei mir, ich freue mich auf unser gemeinsames Projekt.