JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<div class="test">
  test
</div>

CSS

/* Вначале стили для обычных экранов */

/* Первое — для phone, без media-правил */
.test {
  background: red;
}
.test:before {
  content: 'common phone screen'
}

/* второе — для pad */
@media (min-width: 400px) {
  .test:before {
    content: 'common pad screen'
  }
}

/* Третье — для desktop */
@media (min-width: 800px) {
  .test:before {
    content: 'common desktop screen'
  }
}


/* Потом стили для ретина экранов */

/* Первое — для phone. -webkit-min-device-pixel-ratio — старый синтакис, min-resolution — новый синтаксиc */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .test {
    background: green;
  }
  .test:before {
    content: 'retina phone screen'
  }
}

/* второе — для pad. */
@media (min-width: 400px) and (-webkit-min-device-pixel-ratio: 1.5),
(min-width: 400px) and (min-resolution: 144dpi) {
  .test:before {
    content: 'retina pad screen'
  }
}

/* третье — для desktop. */
@media (min-width: 800px) and (-webkit-min-device-pixel-ratio: 1.5),
(min-width: 800px) and (min-resolution: 144dpi) {
  .test:before {
    content: 'retina desktop screen'
  }
}