Media Queries

Viewport

<meta name="viewport" content="width=device-width">

 

@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

 

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/