Tablets und Smartphones haben zwar einen hohen Pixelwert, der Browser rechnet jedoch mit einem anderen Wert. Um auf diesen Wert zu kommen reicht es meiner Erfahrung aus, die angegebenen Pixelwerte zu halbieren.
Guter Beitrag dazu.
Hier mal eine Ausgangsbasis die du so in etwa verwenden kannst:
Code:
@media only screen and (max-width:64em) {/*960 - 1025*/
body:background-color:green;
}
@media only screen and (max-width:60em){/*768 - 959*/
body:background-color:blue;
}
@media only screen and (max-width:47.9375em){/*481 - 767*/
body:background-color:red;
}
@media only screen and (max-width:30em){/*0 bis 480*/
body:background-color:yellow;
}