Как подключить Retina макет?

Question

[AlohaAlohaAloha]

Доброе утро,

Являясь начинающим верстальщиком, хотелось бы уточнить у профессионалов, каким образом подключать Retina макет страницы?
У меня есть обычный макет, а также макет увеличенный в два раза. Хотелось бы посредством CSS либо JS сделать так, чтобы пользователи с Retina дисплеями, само собой, открывали второй вариант страницы.

Заранее благодарен!

Answer 1

[Андрей Хохлов]

Разрешение экрана макбука, например, 2880x1800.
Однако для вас это те же 1440x900, где каждый пиксель представлен двумя.

Т.е. верстайте как-будто ретины и нет.
Единственное что вам следует помнить: все растровые изображения лучше подготовить для ретины.

Причем для контентных элементов (картинки в статьях например) вопрос необходимости открытый и методы свои.
Для элементов интерфейса, я считаю, вопроса не стоит вовсе - готовить нужно.

Как готовить?
Либо используйте svg, либо png в 2-кратном размере.
То есть если у вас иконка 20*20px, её картинка должна быть 40*40 и примерно следующие css-свойства:

.icon {
    background-image: url(icon.png);
    background-size: 20px 20px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx), only screen and (min-device-pixel-ratio: 2) {
    background-image: url([e-mail]);
}

Про то что лучше собирать иконки в спрайты и т.д. и т.п. рассказывать не буду.