Viewport
<meta name="viewport" content="width=device-width">
Info http://maddesigns.de/meta-viewport-1817.html iPhone / iPod Touch
@media only screen and (max-device-width: 480px) {}iPhone 4(S) (Retina Display)
@media only screen and (max-device-width: 480px{} iPad
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){}
Stylesheets einbinden
<linkrel="stylesheet"type="text/css"media="only screen and (max-device-width: 480px)"href="max-480.css"/>
Desktop & Laptops
@media only screen and (min-width: 1224px){... }
Große Bildschirme
@media only screen and (min-width:1824px){... }
iPads(Portrait/Landscape)
@media only screen and
(min-device-width:768px) and
(max-device-width:1024px) and
(orientation:portrait/landscape){... }
Smartphone
@media only screen and
(min-device-width:320px) and
(max-device-width:480px){... }
@import
@import url("style.css") screen and (min-width: 800px);
Übersicht über die Geräte
http://stephen.io/mediaqueries/