As I search for standards regarding 'Responsive Design', I often come across something along the lines of this link: Responsive Design.
However, most pages suggest using specific min-width and max-width values for smartphones. But in my case, with a smartphone resolution of 720 x 1280, these media queries may not apply.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
I'm torn on the best approach. How can I ensure that my Android device with a resolution of 1280 x 720 in landscape mode uses one CSS file, while a desktop PC with the same resolution uses another?