Как сверстать данный блок под ретину?

Question

[Анатолий Саламатин]

Всем привет! Скажите пожалуйста, как сверстать данный блок под ретиину take.ms/VWKh6 ?

Контент должен растягиваться на всю ширину экрана/

Есть ли тут подводные камни? Заранее спасибо!

Answer 1

[Евгений]

Чет не совсем понял вопроса, причем тут ретина? Верстайте так же как и не под ретину, единственное что вам тут можно сделать это изображение в 2х вариантах под ретину и под обычные экраны. Подводных камней нет.
Если изображение в виде img тэга тогда можете сделать через srcset:
<img src="hero.jpg" srcset="hero2x.jpg 2x">
Если через css, тогда через media запрос:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {}

Comments

[Дмитрий Христоев]

только вот с srcset проблема - caniuse.com/#feat=srcset да и с iphone мне писали про проблемы при подмене, лучше уже https://imulus.github.io/retinajs/

[Евгений]

Дмитрий Христоев: Какая проблема? Нету на IE и Opera Mini, разве у кого-то будут эти браузеры с ретина экраном?

[Дмитрий Христоев]

Евгений: мак с виндой и современный мобильник с оперой мини ни кто не отменял. а srcset даже с поддержкой на айфонах фигово работает

[Евгений]

Дмитрий Христоев: Проверил на iphone, в симиляторе и на девайсе ios 7-10 проблем нету. По поводу IE, если нужна эта аудитория - либо делайте JS решения либо оставляйте так, в любом случае будет фолбэк на 1x разрешение. Просто как бы IE уже не поддерживается, какой смысл поддерживать не крупные сайты под старые браузеры.