HTML and CSS Reference
In-Depth Information
hoch- und runterzuscrollen, um die gesamte Höhe der Spalte zu erfassen. Dies soll-
ten Sie in jedem Fall vermeiden.
Sharky empfiehlt
Verwenden Sie die Mehrspaltigkeit nur, wenn der komplette Text auf die sichtbare
Bildschirmfläche passt.
Media Queries - Definitionen für bestimmte Bildschirmgrößen
Media Queries sind die wichtigste Neuerung von CSS3 und für die Entwicklung von
WebApps von hoher Relevanz. Sie ermöglichen es, Definitionen für bestimmte Bild-
schirmgrößen festzulegen. Damit können Sie mit derselben CSS-Datei z. B. ein Smart-
phone und gleichzeitig ein Tablet ansprechen und die Darstellung je nach
Bildschirmgröße variieren.
Sie geben Media Queries direkt in der CSS-Datei an und erweitern die Sharky App so,
dass die gerade eingestellte Mehrspaltigkeit nur auf einem Tablet greift. Dies ist sinn-
voll, weil auf einem Tablet mehr Platz als auf einem Smartphone zur Verfügung
steht. Setzen Sie dabei die Gestaltung des
article
in folgenden Media Query:
@media screen and (min-device-width: 768px) {
article {
-webkit-column-count:2;
-webkit-column-rule: solid 1px #ccc;
-webkit-column-gap: 20px;
}
}
Listing 2.8
Über ein Media Query blenden Sie die Mehrspaltigkeit nur ab einer bestimmten
Bildschirmgröße ein
Mit diesem Media Query wird die Mehrspaltigkeit auf einem iPad angewendet (Abbil-
dung 2.13), auf einem iPhone jedoch nicht (Abbildung 2.12).
Sie haben außerdem die Möglichkeit, Bereiche anzugeben ...
@media screen and (min-width: 300px) and (max-width: 800px) {
/* Hier die Definition, die nur in einem bestimmten Bereich gelten soll */
}
… oder sogar abzufragen, ob das Gerät im Hochformat oder Querformat gehalten
wird, was besonders für die WebApp-Entwicklung von Wichtigkeit ist:
Search WWH ::
Custom Search