Photoshop в CSS, только что получил Retina [дубликат]

Я только что получил новый Macbook Pro с Retina, и я не понимаю, как атаковать мои PSD. Если я разрабатываю сайт с размером шрифта 14 пикселей, должен ли я установить его на 28 пикселей в Photoshop, чтобы получить то, как он будет выглядеть в CSS? Или, если мой веб-сайт должен иметь заголовок высотой 60 пикселей, должен ли я сделать его 120 пикселей в Photoshop?

Думаю, я запутался, потому что CSS остается прежним, но должен ли я удваивать все в Photoshop, чтобы получить то, как это будет выглядеть в CSS?

Прежде всего, Photoshop — это программное обеспечение для редактирования изображений, и его основная цель — не создание веб-дизайна. При этом не существует общего правила, как вы должны установить размер шрифта в пикселях, так как это зависит от того, какое разрешение вы установили для изображения и в каком масштабе вы на него смотрите.

Ответы (1)

Для изображений, тогда да, вам нужна версия одного и того же изображения. Один оригинальный размер и более крупная версия в два раза больше. Есть несколько способов заставить ваше изображение работать при увеличении. С помощью Javascript вы захотите сохранить изображения, такие как myimage.jpg и myimage@2x.jpg. Затем вам нужно будет загрузить retina.js с http://imulus.github.io/retinajs/ , а затем включить

<script src="js/retina.js"></script>.

вы также можете сделать это с помощью css

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
header h1 a {
    background-image: url(images/myimage@2x.png);
    background-size: 164px 148px; //original size image
}
}

Я бы воздержался от нарезки PSD и попыток сделать все «Retina».