0

I've been looking around for some standards for 'Responsive Design' and most of the time i end up with something similar to this --> Responsive Design.

However! it says most pages says that i should be using the following min-width and max-width for smartphones, and i know that MY smartphone as a resolution of 720 x 1280 And would not fit the media query below!

/* 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 */
}

What is the best way to go? I want my android device with 1280 x 720 (in landscape orientation) to use one css and a desktop PC with 1280 x 720 to use another.

Community
  • 1
  • 1
Dym
  • 61
  • 3
  • 9
  • Different devices with the same resolution should behave the same. Have you used in your html/head ? – randomizer Feb 03 '14 at 13:11
  • Also this might be useful http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web – David Randall Feb 03 '14 at 13:25
  • It's very unlikely you'll get a desktop pc with a 720 x 1280 px screen, a 1280 x 720px screen, yes, but then the width would be 1280 px. –  Feb 03 '14 at 13:58
  • @randomizer I do have in my yes. – Dym Feb 03 '14 at 14:29
  • @Dijon Yes i did mean **1280 x 720** PC screen, which would be the same size as my android in landscape orientation. But i'll solve it in one way or another >.< always do. – Dym Feb 03 '14 at 14:29

3 Answers3

1

It's best to test your design and work out what the appropriate breakpoints for it are, and base your @media rules on that, rather than to chase specific screen sizes. There are far too many screen sizes to cater specifically to them all, and you don't need to anyway.

ralph.m
  • 13,468
  • 3
  • 23
  • 30
1

This will help you generate a media query for your device http://atmedia.info/

Also Media Queries for Standard Devices : http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Debajyoti Das
  • 2,038
  • 4
  • 34
  • 66
1

We should be basing media queries around our content, not around specific devices (for the most part)*.

So when you're developing your site squeeze your browser down to as far as it will go (or as narrow as you'd like to support) and make it look good there first. This is called 'Mobile-first' development.

After you do that, widen your browser until something looks broken, weird, or just off. That's where you should put your first media query breakpoint.

Make it look good there, and then keep doing that over and over again until it looks good however wide you want to support.

*You will then probably want to look at your site on a few specific devices that you know people use to look at your site with and determine if you need to do any extra media query work (for instance, if a paragraph wraps weirdly).

As far as your specific media query syntax, the mozilla developer documentation is always a very good place to start.

Good luck!

chapeljuice
  • 856
  • 1
  • 11
  • 21