使用媒体查询的 Retina 显示图像分辨率
Retina display image resolution using media queries
使用媒体查询既检测视网膜显示器又指定 max-width
的最佳方法是什么?
我可以使用
检测视网膜
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
}
如何将它添加到媒体查询中?我写
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
@media screen and ( max-width: 2000px){
.holer{
background:url("background@2x.png");
}
}
}
或者有没有更好的方法来改变视网膜显示器的图像? (将屏幕尺寸的媒体查询添加到视网膜显示的媒体查询中)
根据 CSS-tricks 的 this 文章,您可能会覆盖所有视网膜显示器。我想你已经发现了。另一种选择是使用 SVG,但我不会将它们用于背景图像。 SVG 格式非常适合二维形状和图标,尽管图标字体渲染速度更快。
至于问题"how to add media queries for screen size to media queries for retina display",您发布的代码应该可以正常工作。另一种方法是将第二个子句添加到第一个子句中,如下所示:
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and ( min--moz-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and ( max-width: 2000px),
only screen and ( min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and ( min-resolution: 192dpi) and ( max-width: 2000px),
only screen and ( min-resolution: 2dppx) and ( max-width: 2000px) {
.holer {
background:url("background@2x.png");
}
}
如果您使用的是 SCSS,请按照说明创建混合宏 here。这将为您节省大量时间并显着提高可读性。
使用媒体查询既检测视网膜显示器又指定 max-width
的最佳方法是什么?
我可以使用
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
}
如何将它添加到媒体查询中?我写
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
@media screen and ( max-width: 2000px){
.holer{
background:url("background@2x.png");
}
}
}
或者有没有更好的方法来改变视网膜显示器的图像? (将屏幕尺寸的媒体查询添加到视网膜显示的媒体查询中)
根据 CSS-tricks 的 this 文章,您可能会覆盖所有视网膜显示器。我想你已经发现了。另一种选择是使用 SVG,但我不会将它们用于背景图像。 SVG 格式非常适合二维形状和图标,尽管图标字体渲染速度更快。
至于问题"how to add media queries for screen size to media queries for retina display",您发布的代码应该可以正常工作。另一种方法是将第二个子句添加到第一个子句中,如下所示:
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and ( min--moz-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and ( max-width: 2000px),
only screen and ( min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and ( min-resolution: 192dpi) and ( max-width: 2000px),
only screen and ( min-resolution: 2dppx) and ( max-width: 2000px) {
.holer {
background:url("background@2x.png");
}
}
如果您使用的是 SCSS,请按照说明创建混合宏 here。这将为您节省大量时间并显着提高可读性。