Jump to content
Sign in to follow this  
MarcosFM

Media queries in px or cm?

Recommended Posts

Hi! I've been reading about media queries in www.w3schools.com and then thinking about the screen sizes of mobile phones, tablets, laptops and desktops.

As you can see in webpages like http://screensiz.es/ the width of a Huawei Nexus 6p (mobile phone) is 1440px, while the width of a Lenovo Thinkpad X230 (laptop) is 1366px. This means that the number of pixels of a screen doesn't tell us its real size and, therefore, I don't think it makes sense to create media queries in px, like the following example from www.w3schools.com:

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

I think it would be better to write the above media query as follows (I think 14 cm is the maximum width you can find in mobile phone screens today):

@media only screen and (max-width: 14cm) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }

Maybe I'm making a mistake, I don't know...:huh:

Could anybody help? Thank you, Marcos.

Share this post


Link to post
Share on other sites

The "pixels" used in CSS are not real pixels, they're called "device-independent pixels". A phone's native width may be 1080 pixels, but that usually translates to 375 device-independent pixels, small phones are usually 320 pixels, tablets are 768 pixels in portrait mode and 1024 pixels in landscape. Pixels are a more accurate way to measure devices because most of the time a device doesn't actually know its actual physical size and it just tries to make estimates.

Share this post


Link to post
Share on other sites

I don't know where there's a list. Generally you should never develop for specific devices, you should just make your layout flexible enough (with help of media queries) to wotk on any screen regardless of size. This is usually achieved by testing your page in the responsive mode of your browser and resizing the viewport until it breaks, then you add a media query to correct the layout.

But for reference, I start off with a design for the following devices, then make extra adjustments later:

  • Small mobile (iPhone 4):Up to 374px (I usually use this just for specific elements that didn't fit)
  • Mobile or small mobile in landscape): Up to 767px
  • Tablet portrait: 768px
  • Tablet landscape: 1024px (breakpoint usually between 800px and 900px)
  • Desktop: 1025px and above

Some people make designs for large desktop computers (1440px and above), but that's up to you.

In general, there isn't one specific strategy for responsive design, this is just the approach from the companies I work with.

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×