有没有办法在css媒体查询中使用DPI而不是px
宽度和高度的像素数并不总能说明全部情况。这对于在屏幕上添加或删除项目非常有效,但对于设置正确的图像却不太合适。使用MBP上的视网膜显示器,将浏览器窗口设置为屏幕的一半,其宽度将与当今大多数机器的像素数相同。然而,由于DPI较高,显示的图像可能太小 是否有一种方法可以根据DPI而不是像素数宽度和高度来更改图像?您可以执行以下任一操作:有没有办法在css媒体查询中使用DPI而不是px,css,media-queries,Css,Media Queries,宽度和高度的像素数并不总能说明全部情况。这对于在屏幕上添加或删除项目非常有效,但对于设置正确的图像却不太合适。使用MBP上的视网膜显示器,将浏览器窗口设置为屏幕的一半,其宽度将与当今大多数机器的像素数相同。然而,由于DPI较高,显示的图像可能太小 是否有一种方法可以根据DPI而不是像素数宽度和高度来更改图像?您可以执行以下任一操作: <link rel="stylesheet" type="text/css" href="/css/retina.css" m
<link
rel="stylesheet"
type="text/css"
href="/css/retina.css"
media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"
/>
您需要的是设备像素比率。因为像iPhone这样的东西显示起来像一个320px的屏幕,但是有一个640px的布局(像素比为2)。在媒体查询中,使用“设备像素比率”。虽然我会确保仍然使用供应商前缀
这是一篇很好的帖子:还有
和-webkit图像集
css功能,但它们似乎只有Safari/Chrome/Opera支持。例如:
<img src="image.png" srcset="image-1x.png 1x,
image-2x.png 2x, image-3x.png 3x">
background-image: -webkit-image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
2019年,您可以在除safari以外的所有现代浏览器中使用媒体查询以获得分辨率、最小分辨率和最大分辨率:
@media (min-resolution: 72dpi) {
p {
text-decoration: underline;
}
}
请参见我认为应该是
min--moz设备像素比率
@media only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx)
@media (min-resolution: 72dpi) {
p {
text-decoration: underline;
}
}