CODEWITHSUNDEEP
androidcssresponsive-designsmartphone
Dym
Dym

Reputation: 61

Responsive Design / Media Queries

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.

Upvotes: 0

Views: 462

Answers (3)

Debajyoti Das
Debajyoti Das

Reputation: 2138

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/

Upvotes: 1

chapeljuice
chapeljuice

Reputation: 886

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!

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

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.

Upvotes: 1

Related Questions