HTML and CSS Reference
In-Depth Information
Praktisch funktioniert die Angabe von 480 Bildpunkten allerdings noch mit dem
iPhone 4, da der Retina-Bildschirm intern die doppelte Pixelanzahl berechnet. Sie
könnten daher ein iPhone 4 sogar mit folgender Zeile erkennen und spezielle CSS-
Definitionen zuweisen:
<link rel "stylesheet" media "only screen and ( webkit min device pixel
ratio: 2)" type "text/css" href "iphone4mobile.css" />
Sie werden etwas weiter unten im Buch noch bessere Möglichkeiten kennenlernen, um
ein iOS- oder Android-Gerät von normalen Computern zu unterscheiden. Sie sollten
wissen, dass wir pro Ausgabemedium unterschiedliches CSS zuweisen können, aller-
dings gibt es in der Praxis wesentlich verlässlichere Wege dazu.
Die Seite untergliedert sich in vier Hauptbereiche: den Kopfbereich mit dem Namen des
Autohändlers, die Navigation, den eigentlichen Inhalt und die Kontaktadresse, die im
Fußbereich der Webseite steht. Alle Bereiche sind deutlich als einzelne
div-
Bereiche
gekennzeichnet. Die Stylesheets in der Datei
computer.css
bezeichnen nicht nur die
Schriftgröße oder die Hintergrundfarbe, sondern bestimmen auch die Anordnung der
einzelnen Hauptteile. Was früher oft von unsichtbaren Tabellen übernommen wurde,
lässt sich einfach und wesentlich präziser mit
div
-Bereichen und CSS übernehmen.
<html>
<head>
<title>Oldtimer Spiering</title>
<link rel "stylesheet" type "text/css"
media "screen and (min width: 961px)" href "computer.css">
<link rel "stylesheet" type "text/css"
media "only screen and (max width: 960px)" href "mobile.css">
<link rel "stylesheet" type "text/css"
media "print" href "drucker.css">
<! [if IE]>
<link rel "stylesheet" type "text/css" media "all" href "ie.css">
<![endif] >
</head>
<body>
<div id "kopfbereich">
<h1>Oldtimer Spiering</h1>
<h2>Spitzen Oldtimer von VW und Porsche</h2>
<p>Wir führen und reparieren Old und Youngtimer der Marken VW und
Porsche.</p>
</div>
<div id "navigation">
<ul>
<li><a href "angebote.html">Aktuelle Angebote</a></li>
<li><a href "volskwagen.html">Unsere VWs</a></li>
<li><a href "porsche.html">Unsere Porsche</a></li>
<li><a href "preisrechner.html">Preisrechner</a></li>
<li><a href "kontakt.html">Reparaturen</a></li>
</ul>
</div>
