0

My mobile resolution is 2960PX×1440PX and my desktop resolution is 1366x768. From that, mobile resolution is bigger than desktop. While using media queries, my mobile should render desktop website instead of mobile website as the resolution of mobile is more. Is there any the difference between mobile resolution and desktop resolution? On what basis these media queries are handled.

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

Can Refer the below link: https://codepen.io/TrentWalton/pen/kqxDy

If I look at the link via mobile, I can able to see the boxes one after other i.e. Orange Block then in the next line, Blue Block even though mobile resolution is more.

Kamalesh M. Talaviya
  • 1,422
  • 1
  • 12
  • 26
Ramesh
  • 8,921
  • 3
  • 18
  • 14
  • On a screen larger than 1200px, the css in _all_ of your media queries would be used. If you have CSS in your first media query that isn't overriden by the subsequent media queries, it will be used. Hard to say if this is actually the issue without a [MCVE] – Turnip Feb 27 '19 at 12:24
  • Your CodePen is completely different to the code you have posted in your question. In the CodePen you are using `max-width: 600px`, meaning "if the screen is _**less than**_ 600px, use these styles". The code works exactly as expected. – Turnip Feb 27 '19 at 15:19
  • Due to the high resolution of retina displays, the actual pixel resolution of the display is not the value you would use for the media queries. Perhaps this is throwing you off. The value is usually divided by 2, 3 or more. This might help: https://stackoverflow.com/questions/46313640/iphone-x-8-8-plus-css-media-queries – Turnip Feb 27 '19 at 15:30
  • So based on the screens displays(types), the resolutions will be divided by 2, 3 or more. This will be taken care by media queries internally you mean to say? – Ramesh Mar 01 '19 at 05:59

0 Answers0