scss _retina.scss

Posted 2021-05-18

@import "retina";

.body-text {
  font-weight: normal;

  @include retina {
    font-weight: 300;
  }
}

@mixin retina($ratio: 1.5) {
  $dpi: $ratio * 96;
  $opera-ratio: $ratio * 100;

  @media only screen and (-webkit-min-device-pixel-ratio: #{$ratio}),
         only screen and (     -o-min-device-pixel-ratio: '#{$opera-ratio}/100'),
         only screen and (                min-resolution: #{$dpi}dpi),
         only screen and (                min-resolution: #{$ratio}dppx) {
    @content;
  }
}