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像素比率的显示器上工作正常，但在高dpi显示器上，缩略图显得太大。

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

但这并没有真正解决任何显示器的问题，它只是将其修复为1.3 dpi的显示器。

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

我正在寻找类似的东西：

...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”，您将确保您的设计在其他设备中正常工作......

请阅读此帖：Why em instead of px?

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

如果您想要具有良好的响应式设计，请使用Inspect Element移动镀铬......

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

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

1 个答案: