Проблема с заменой фонового изображения на ретине?

Question

[botr]

Ребята, вот код:

@mobile-width-only: ~"(max-width: 768px)";
@tablet-width: ~"(min-width: 768px)";
@retina: ~"(min-resolution: 144dpi),
(min-resolution: 1.5dppx)";

media @retina and @mobile-width-only {
.preview {
background-image: url("img/[e-mail]");
background-size: 575px auto;
}
}

media @retina and @tablet-width {
.preview {
background-image: url("img/[e-mail]");
background-size: 1150px auto;
}
}

Срабатывает то, что стоит ниже по коду, т.е. если стоит ниже @mobile-width-only, то картинка на любой ширине - [e-mail], если @tablet-width, то соответственно на любой ширине - [e-mail]. Размеры заданные bg-size срабатывают так же, т.е. то что идет ниже.
Никак не пойму что не так))

Answer 1

[botr]

media (max-width: 768px) and (min-resolution: 144dpi),
(max-width: 768px) and (min-resolution: 1.5dppx) {
.preview {
background-image: url("img/[e-mail]");
background-size: 575px auto;
}
}

media (min-width: 768px) and (min-resolution: 144dpi),
(min-width: 768px) and (min-resolution: 1.5dppx) {
.preview {
background-image: url("img/[e-mail]");
background-size: 1150px auto;
}
}

все, разобрался, вот так сработало))