Quelle: viewportify
Mobile Geräte – im Gegensatz zum Desktop – …
Fenster
(mobile|mobi|m).domain.tldGestalterischer und technischer Ansatz zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts reagieren können
| Responsive Seite | Normale + Mobile Seite |
|---|---|
| 1 Ressource, 1 Seite | 1 Ressource, 2 Seiten |
| Schnellerer initial Load, mögl.w. mehr Daten | 1 Round Trip mehr → zusätzliche Ladezeit, dafür weniger Daten |
| Links gut teilbar | Links häufig schlecht teilbar |
| Darstellung nach Eigenschaften | Darstellung durch UA-Sniffing o.ä. fehleranfällig |
Aber beides auch in Kombination nutzbar.
CSS-Hacks Selektoren und Attribute
/* IE6 */
* html #element { _color: blue }
/* IE7 (and attribute IE7) */
*:first-child+html #element { *color: blue; }
Conditional Comments
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head> <!-- Bedingte Stylesheets -->
<link rel="stylesheet" href="all.css">
<link rel="stylesheet" media="all and (max-device-width: 480px)"
href="mobile.css">
</head>
.menu li { display: inline-block; }
@media (max-width: 480px) and (orientation: landscape) {
.menu li { display: block; }
}
.item { float: left; width: 33.333%; }
@media (max-width: 768px) { .item { width: 50%; } }
@media (max-width: 480px) { .item { width: 100%; } }
/* Fluid Images (ja, so einfach) */
img { max-width: 100%; }
/* Hintergrundbilder abhängig von Bildschirmauflösung */
.box {
background: url('images/box-bg.png') no-repeat top left;
width: 200px; height: 200px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.box {
background: url('images/box-bg@2x.png') no-repeat top left;
background-size: 200px 200px;
}
}
srcset & sizes<img src="medium.jpg" srcset="medium.jpg 1x, large.jpg 2x">
<img src="small.jpg"
srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w">
<img src="medium.jpg" srcset="medium.jpg 600w, large.jpg 900w"
sizes="(min-width: 20em) 50vw, 100vw">
<picture><picture>
<source media="(min-width: 20em)" srcset="horizontal.jpg">
<source srcset="vertical.webp" type="image/webp">
<source srcset="vertical.jpg">
<img src="fallback.jpg">
</picture>