61 lines
1.7 KiB
SCSS
61 lines
1.7 KiB
SCSS
// use with @include
|
|
@mixin breakpoint($breakpoint) {
|
|
$phone-width: 450px;
|
|
$phone-height: 920px;
|
|
|
|
$tablet-width: 1024px;
|
|
$tablet-height: 1024px;
|
|
|
|
@if $breakpoint == tablet {
|
|
// prettier-ignore
|
|
@media only screen
|
|
and (max-width: $tablet-width)
|
|
and (max-height: $tablet-height)
|
|
and (-webkit-min-device-pixel-ratio: 2) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@if $breakpoint == phone {
|
|
// prettier-ignore
|
|
@media only screen
|
|
and (max-width: $phone-width)
|
|
and (max-height: $phone-height)
|
|
and (-webkit-min-device-pixel-ratio: 2) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|