Should I use device width as stated in your site or max-width?

[piano0011]

Hey guys!

I am trying to style my media queries at the moment and not sure if I should use device width or max width? Must I also do a portrait and landscape orientation?

from,

Mervin

[Beverleyh]

should use device width or max width?

It depends what you’re trying to do. Try making a reduced demo in CodePen and clearly explain what you’re trying to achieve, why your current attempt isn’t working as expected, and what you actually expect to happen.

Must I also do a portrait and landscape orientation?

No, you’d use whatever you need to get the job done. It depends if you’re content flows well enough vertically and/or if viewing height critically affects things in some way. width is typically most common in conjunction with min- or max- range features. Refer to my previous answer too though, and get more info here https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

[piano0011]

Hello!

I am trying to follow this query from one of your articles but shouldn’t the landscape with be 640px instead of 320?

/* ———– Galaxy S3 ———– */

/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {

[Beverleyh]

No, that’s right because of the pixel ratio.

This all sounds awfully familiar – use the answers here to guide your research in order to further your own understanding (Google is your friend) https://css-tricks.com/forums/topic/how-to-do-media-query/

Particularly;

double pixel density. Basically, a pixel isn’t a pixel anymore now that we have high def/retina screens.

Try researching -webkit-device-pixel-ratio:2 media queries

But, as I said before…

I wouldn’t focus on targeting specific device sizes if I were you. Rather than trying to design for specific size screens (that are changing all the time), design for your own content, and modify the layout based on your own breakpoints. Basically, pull in the browser width/height, and when the layout starts to look dodgy, change it in a media query for that size so that it looks good again.

[piano0011]

thanks for the advice but according to google chrome, it says that the width is 640 when I clicked on the rotation feature?

[Beverleyh]

Probably because of that double pixel density (cycling back round to the previous answer). But hit Google for further clarification using the terms/topics suggested above.

[piano0011]

Hello!

I have seen the website that you recommended but am still a bit confused because when I clicked on the rotation button on chrome, it says that it should be 640 by 320 for landscape for a samsung s3. Also, is device-width the same as max width because when I typed device-width, it doesn’t respond well in chrome

[Beverleyh]

double pixel density !!!!!

is device-width the same as … width

No.

Google is your friend http://lmgtfy.com/?q=CSS+device-width

I’m going to leave this thread now because it’s too frustrating.

Good luck.

[Author]

Posts