CODEWITHSUNDEEP
cssmedia-queries
user4340635
user4340635

Reputation: 143

Confused about media queries and resolution?

I am a beginner and have been working on my first responsive site with media queries.

A site I was reading told me some standard ones were

768-1024 for tablets

320-480 for smart phones.

I used these to begin, However, when I open it with my note 3 I get the tablet version and the menu is too small for it. This same result happens with an iphone 4.

Even when I changed the smart phone range to 320-767, both phones still are using the "tablet" layout. The note 3 has a width of 720 correct? so with this it should force it into the smart phone query right? Am I misunderstanding this? How can it tell the difference between something small but with a high resolution like the note 3 to a tablet so that I can have larger elements on the note3?

If someone could explain to me what is going wrong here I would gladly appreciate it.

Upvotes: 1

Views: 171

Answers (3)

baddong
baddong

Reputation: 29

If you are creating your website based on the screen sizes only well use media queries also if you based it on resolutions also media queries best suite your problems. try http://www.hongkiat.com/blog/css-retina-display/

Upvotes: 0

baddong
baddong

Reputation: 29

Yeah @rwzy 1920x1080 I should say. He must design first in mobile then going larger on desktop and tablet, He must choose Breakpoints based on the content not on defines screen sizes.

Upvotes: 1

xd1le
xd1le

Reputation: 182

The note 3 has a 1920x1080 resolution, not a width of 720 pixels.

Instead of selecting pre-defined values for targetting specific devices, it is recommended to use values suited to your content specifically. That way, all devices can expect an appropriate layout, usually with more simple media-query rules too. There are just too many devices out there today to pick specific values.

Upvotes: 1

Related Questions