How to design and layout for retina display?

Question

css

На днях у нас с дизайнером произошла заминка. Он мне прислал макет сайта, я его сверстал пиксель в пиксель. Под виндой на обычном мониторе все выглядет отлично! Но дизайнер начал качать права, что у него на маке все в два раза больше чем чем он рисовал. Т.е. он отрывает исходник psd в фотошопе на 100%, октрывает сайт и разница у них во всех размеров ( шрифтах, блоков, отступов и т.п.) ровна в два раза больше.
Из-за чего такое получается? Кто накосячил, из-за чего на маке шаблон не сходиться с сайтом? Что делать, что бы такого в дальнейшем избежать?

Answer 1

• Забыть о фиксированных величинах, то есть про px и использовать % по максимуму.
  
• Использовать svg вместо png, или увеличивать размер png
  
• Применяя media queries определять экраны с высокой плотностью пикселей и заменять изображения на увеличенные в 2 раза. Можно для этих целей применить javaScript, можно заюзать retina.js
  

Answer 2

The designer screwed up - he drew a layout of the site under the retina. The entire web should be drawn at normal resolution and only special graphics (if necessary): icons, illustrations are drawn either in two resolutions (normal and 2x) or immediately in SVG. Well, they have already answered above, depending on the type of screen in the layout, palm it off respectively. graphics.

Answer 3

Recommended reading .
And tell the designer that he is @#?!&, so layouts are not compared.

Answer 4

Tell a designer that designing a website for retina means giving up 90% of the visitors. Few people have an expensive poppy. Yes, and at work in most offices there are cheap monitors, even without full-hd.