Responsive Webdesign

Responsive Webdesign ist die neue Art Endgerät spezifische Layouts zu bauen. Das Zauberwort heisst @media. In diesem Artikel sind einige Beispiele und Links auf Webseiten mit Responsive Webdesign.

Beispiel von @media in CSS


/* WIDE DESKTOP LAYOUT
----------------------------------------------- */
@media only screen and (min-width: 1176px) {
}

/* TABLET LAYOUT
----------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
}

/* MOBILE LAYOUT (PORTRAIT/320PX)
----------------------------------------------- */
@media only screen and (max-width: 767px) {
}

/* WIDE MOBILE LAYOUT (LANDSCAPE/480PX)
----------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}

/* RETINA OVERRIDES
----------------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
}

/* IPAD
----------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) {
}

/* IPHONE 3
----------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 480px) {
}

/* IPHONE 4
----------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {
}

/* TWEAKS FOR SAFARI + CHROME.
----------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 0) {
}