当前位置: 首页 > Web前端 > CSS

移动端项目@2x图和@3x图的使用_0

时间:2023-03-31 12:23:41 CSS

移动端开发过程中,由于手机的dpr(设备像素比例不同),我们需要根据需要修改图标的大小tothedpr:如果设备像素大于等于2,则使用2x图像在stylus中定义一个方法:bg-image($url)/\*如果设备像素大于等于2,使用2x图片\*/background-image:url($url+"@2x.png")background-repeatno-repeat@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3)/\*如果设备像素大于等于3,则使用2Doubleimage\*/background-image:url($url+"@3x.png")background-repeatno-repeat-webkit-min-device-pixel-ratio:3表示此时显示器的最小色彩比例为3倍