0

I have these media query rules that specify how many thumbnails should fit inside a row, depending on the window width:

@media only screen and (min-width: 250px){ 
  li{
    max-width: 100%;
  }
}

@media only screen and (min-width: 700px){ 
  li{
    max-width: 50%;
  }
}

@media only screen and (min-width: 950px){ 
  li{
    max-width: 33.3333333333%;
  }
}

@media only screen and (min-width: 1200px){ 
  li{
    max-width: 25%;
  }
}

@media only screen and (min-width: 1600px){ 
  li{
    max-width: 20%;
  }
}

It works fine on a display with a 1.0 pixel ratio, but on high-dpi displays the thumbnails appear too large.

After some googling I found out that I should add another set of rules for higher dpi displays that include (and min-resolution: 1.3dppx)

But that doesn't really fix the problem for any display, it just fixes it for a display with a 1.3 dpi.

Is there any way to adjust the min-width values in the first set of rules in such a way that it takes into account the device pixel ratio?

I'm looking for something like:

...and (min-width: (250px * resolution))

but that obviously doesn't work :/

thelolcat
  • 10,995
  • 21
  • 60
  • 102

1 Answers1

1

if you are use the "em" in media query it's solved your problem.

1em = 16px 

@media only screen and ( min-width: 15.625em ){  // 250 / 16 
  li{
     max-width: 100%;
  }
}

if you are using the "em" you will be sure your design worked correctly in other device ...

please read this post : Why em instead of px?

https://css-tricks.com/why-ems/

if you want to have good responsive design , use the Inspect Element mobile chrome...

finally if you want to calculate the device resolution you should be using the JavaScript , get the width and calculate it...

Community
  • 1
  • 1
Michael
  • 46
  • 6