drucken :: thefox : 24.03.2012
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.
/* 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) {
}