granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add mixin for HiDPI CSS images

Browse source
This commit is contained in:
Justin Edmund 2023-01-22 14:39:28 -08:00
parent 4287c3008f
commit 6fd95d3168
1 changed files with 33 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
styles/mixins.scss
View file

@ -26,3 +26,36 @@
} }
} }
} }
@mixin hidpiImage(
$image,
$extension,
$width,
$height,
$position: center,
$repeat: no-repeat
) {
background: url($image + '.' + $extension) $repeat $position;
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2),
screen and (-moz-min-device-pixel-ratio: 2),
screen and (-o-min-device-pixel-ratio: 2/1),
screen and (min-device-pixel-ratio: 2),
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {
background: url($image + '@2x' + '.' + $extension) $repeat $position;
background-size: $width $height;
}
@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3),
screen and (-moz-min-device-pixel-ratio: 3),
screen and (-o-min-device-pixel-ratio: 3/1),
screen and (min-device-pixel-ratio: 3),
screen and (min-resolution: 216dpi),
screen and (min-resolution: 3dppx) {
background: url($image + '@3x' + '.' + $extension) $repeat $position;
background-size: $width $height;
}
}