HD (HiDPI) breakpoint

Write effective resolution-based @media-queries, without trying too hard.

use-name

scut-hd-bp

type

mixin only

arguments

$ratio

default

1.3

A minimum resolution value.

This mixin sets -o-min-device-pixel-ratio, -webkit-min-device-pixel-ratio, and min-resolution. If you're curious about these choices, read the References below.

example

SCSS

.eg-hd-bp {
  background-color: $eg-muted;
  @include scut-hd-bp(2.0) {
    background-color: $eg-light;
  }
}

compiled CSS

.eg-hd-bp {
  background-color: #CCCCCC;
}
@media (-o-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .eg-hd-bp {
    background-color: #9AE9FF;
  }
}

Result

If you are using an HD screen (1.3 resolution or higher), this paragraph's background will be blue — otherwise, a sad low-definition gray.