如何根据设备分辨率缩放缩略图？答案

【问题标题】：How to scale thumbnails based on the device resolution?如何根据设备分辨率缩放缩略图？
【发布时间】：2017-09-28 23:40:28
【问题描述】：

我有这些媒体查询规则，根据窗口宽度指定一行中应容纳多少个缩略图：

@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 像素比率的显示器上运行良好，但在高 dpi 显示器上缩略图显得太大。

经过一番谷歌搜索后，我发现我应该为更高 dpi 显示器添加另一组规则，其中包括 (and min-resolution: 1.3dppx)

但这并不能真正解决任何显示器的问题，它只是解决了 1.3 dpi 显示器的问题。

有没有办法调整第一组规则中的最小宽度值，以考虑设备像素比？

我正在寻找类似的东西：

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

但这显然行不通：/

【问题讨论】：

标签： css less media-queries screen pixel-ratio

【解决方案1】：

如果您在媒体查询中使用“em”，它就解决了您的问题。

1em = 16px

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

如果您使用“em”，您将确保您的设计在其他设备上正常工作...

请阅读这篇文章：Why em instead of px?

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

如果您想拥有良好的响应式设计，请使用 Inspect Element mobile chrome...

最后，如果你想计算你应该使用 JavaScript 的设备分辨率，获取宽度并计算它...

【讨论】：