media queries

[fábioc64841542]

in media queries, put the size of the cell phone in the media queries and I don't know how to put it in landscape, can someone help? 1.0cm is worth how many px?

[Nancy OShea]

Media Queries are for a range of devices between xxx and xxxx widths, not specific device widths.  If you tried to build a layout with media queries for every device on the market (portrait & landscape), you would never complete your site.  There are too many.  🙂

Bootstrap mobile-first framework is used by millions of websites worldwide.  These are the media queries that Bootstrap uses.

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Hope that helps.

[fábioc64841542]

[Moderator merged with original post on same topic.]

My cell phone is 7cm x 15cm, how much is this measurement in px?

[Nancy OShea]

What make & model is your cellphone?

[Nancy OShea]

1.0cm is worth how many px?

============

Use the online converter below:

https://www.unitconverters.net/typography/centimeter-to-pixel-x.htm

[fábioc64841542]

I used however the averages when placed in the DW, they are different

[Nancy OShea]

Like I said above in your original post, do not use explicit values.  Set media queries for a range of different devices.

//this is for extra-small devices less than 576px

@media (max-width: 576px) { ... }

[B i r n o u]

well to complete what said @Nancy OShea it also depend on the pixel density

https://www.displayninja.com/what-is-pixel-density/

[BenPleysier]

I think that you are going about it in the wrong manner.

My experience is that you should start with the smallest screen sizes. That way you do not have to use media queries for mobile phones. As you increase the real estate (i.e. mobile in landscape), you can start working with media queries. Often mobile in landscape can accommodate two columns side by side, where the portrait version can only accommodate a single column.

All of this has little to do with devices; it has all to do with the available real estate. Having said that and in my opinion, the breakpoints that Nancy mentioned are trialled and tested to be the best option without overdoing it.

[B i r n o u]

since grid mode and column mode appeared in our display compositions (Andy Clark), we all kept trying to optimize our presentations... at first between different screen sizes, then quickly between multiple devices... and today between an old 4S (which is still widely used) and a 5K TV... I'll skip the comments

so it is interesting, to read this article (dating from 2016) in order to better understand, the meaning of cutting. at least to better understand the meaning of breaking content, especially if we have no recourse neither to an information architecture and even less to a content strategy.
https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/

well, and if you don't have a bunch of old and new devices (especially mobile ones) at hand... try the free version of browserstack (it seems to me that once upon a time, Dreamweaver integrated a link with this service) https://www.browserstack.com/responsive?ref=guide-responsive-breakpoints-bottom

[Liam Dilley]

I think a lot of people missing the key stuff here for you.

One of the best references out there:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

You have your max width and min width you can configure of course  as well as the smae for height. You also have..

-webkit-min-device-pixel-ratio (int value)
min-resolution: (dpi Value)

sda