• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

media queries

New Here ,
Jul 02, 2021 Jul 02, 2021

Copy link to clipboard

Copied

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?

TOPICS
How to

Views

225

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 02, 2021 Jul 02, 2021

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

[Moderator merged with original post on same topic.]

 

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

What make & model is your cellphone?

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

quote

1.0cm is worth how many px?

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

Use the online converter below:

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

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

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) { ... }

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

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

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

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.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 06, 2021 Jul 06, 2021

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 08, 2021 Jul 08, 2021

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines