1

I am fresh new to CSS in general and responsive design specially, I had an old website which i successfully redesigned with CSS and everything is fine, when trying to make it responsive i just discovered media queries and i started with restyling the footer using :

@media screen and (max-width:720px){ etc ...}

That works ok and my footer is restyling well, my question is : This looks fine in my mobile which is 720px width, but in the case of a mobile with for example 1080px width it will show the desktop version ? how to avoid that ? I mean if i try with :

@media screen and (max-width:1280px){ etc ...}

To include high resolution mobiles, it will show the mobile version on desktop screen that are 1280px width ? What is the correct usage, ? Thanks

Stalkium
  • 148
  • 1
  • 11
  • There is a difference between device pixels (akin to resolution) and CSS pixels. So a high res device like a retina one can use 4 actual physical pixels to correspond to one CSS pixel. On the whole you don't worry about device resolution, just CSS pixels which is what media queries will pick up. – A Haworth Nov 28 '20 at 09:57
  • visit https://stackoverflow.com/questions/14942081/detect-if-a-browser-in-a-mobile-device-ios-android-phone-tablet-is-used hope this will help you – tanay pingalkar Nov 28 '20 at 10:00

1 Answers1

0

Don’t worry about a device being mobile or desktop or whatever.

Media queries allow you to apply difference style sheets based on the window size.

If you have a media query for devices that are 720px wide or less and the design in that CSS works for screens that wide and another media query for devices that are wider that that, and the design works for devices that size, then everything is fine.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I just tried in my device, for max-width 720px it is ok but if i rotate to landscape it show the desktop version because my phone width at landscape is 1520px, how to avoid this ? Thanks for your answer – Stalkium Nov 28 '20 at 10:12