Как масштабировать эскизы в зависимости от разрешения устройства?

Question

У меня есть эти правила медиа-запросов, которые определяют, сколько миниатюр должно поместиться в строке, в зависимости от ширины окна:

@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%;
  }
}

Он отлично работает на дисплее с соотношением пикселей 1,0, но на экранах с высоким разрешением миниатюры выглядят слишком большими.

После некоторого поиска в Google я обнаружил, что должен добавить еще один набор правил для дисплеев с более высоким разрешением, который включает (and min-resolution: 1.3dppx)

Но это на самом деле не решает проблему для любого дисплея, он просто исправляет это для дисплея с разрешением 1,3 т / д.

Есть ли способ настроить значения минимальной ширины в первом наборе правил таким образом, чтобы он учитывал соотношение пикселей устройства?

Я ищу что-то вроде:

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

но это, очевидно, не работает:/

Answer 1

Если вы используете "em" в медиа-запросе, это решит вашу проблему.

1em = 16px

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

если вы используете "em", вы будете уверены, что ваш дизайн работал правильно на другом устройстве...

пожалуйста, прочитайте этот пост: почему em вместо px?

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

если вы хотите иметь хороший адаптивный дизайн, используйте мобильный хром Inspect Element...

наконец, если вы хотите рассчитать разрешение устройства, вы должны использовать JavaScript, получить ширину и рассчитать ее...