我有这些媒体查询规则,根据窗口宽度指定一行内应容纳多少缩略图:
@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 显示添加另一组规则,其中包括 (和最小分辨率:1.3dppx)
但这并不能真正解决任何显示器的问题,它只是解决了 1.3 dpi 显示器的问题。
有什么方法可以调整第一组规则中的最小宽度值,使其考虑到设备像素比?
我正在寻找类似的东西:
...and (min-width: (250px * resolution))
但这显然行不通:/
最佳答案
如果您在媒体查询中使用“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 移动版 chrome...
最后,如果您想计算设备分辨率,您应该使用 JavaScript,获取宽度并计算它...
关于css - 如何根据设备分辨率缩放缩略图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43721102/