✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов e-mail siteblogger@inbox.ru icq 353-724-370

Главная ›› Уроки по CSS, CSS3 ›› Адаптация изображений под Retina-дисплеи

Адаптация изображений под Retina-дисплеи

Сегодня мы расскажем о том, как можно адаптировать изображения Вашего сайта под Retina-дисплеи, которые используются на современных устройствах Apple — iMac, iPad, iPhone и др. Напомним, что «Retina» — это общее маркетинговое название ЖК-дисплеев, используемых в устройствах Apple и отличающихся высокой плотностью пикселей. Однако, как правило, на Retina-дисплеях часть графики большинства сайтов расплывается, качество изображений падает. Причем «плывет» именно растровая графика, векторная графика отображается и масштабируется без искажений. Существует несколько способов, которые помогают решить эту проблему. В данной статье мы расскажем об одном из них.

Адаптация изображений под Retina-дисплеи

Не секрет, что большинство сайтов имеют свой логотип. Давайте представим, что стоит задача сделать отображение логотипа на Retina, избавившись от размытия. Для этого нам понадобится изображение логотипа в 2 раза большее оригинала. К примеру, если у нас логотип «logo.png» имеет размер 200х50px, то для Retina понадобится логотип размером — 400х100px. Делаем такой логотип в графическом редакторе, например, в Photoshop и называем его — logo@2x.png.

Далее открываем в текстовом редакторе файл стилей нашего сайта, как правило, это файл «style.css» и находим место, где задан стиль отображения логотипа. Что-то в таком роде:

#logo {
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    display: block;
    width: 200px;
    height: 50px;
}

Теперь просто нужно в этот файл стилей (чуть ниже) дописать медиа-запрос, чтобы для дисплеев, у которых соотношение физических и CSS-пикселей больше 1.5, загружалась картинка logo2x.png — делается это так:

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
     #logo {
          background-image: url('images/logo@2x.png');
          background-size: 200px 50px;
     }
}

Не забудьте задать такие же размеры background, что и у исходного изображения — 200х50px. Данный способ целесообразно использовать для небольшого количества изображений. Для отображения логотипа такой способ идеально подходит. А вот для адаптации большего количества изображений на сайте целесообразно использовать другие решения.

Поделитесь ссылкой! Подпишитесь на обновления, чтобы получать новые публикации!

Читайте также:

Оставить комментарий

Siteblogger.ru – проект, охватывающий достаточно широкий круг вопросов: создание сайтов и блогов на WordPress, поисковые системы, поисковая оптимизация и продвижение сайтов, способы заработка в сети, эффективные инструменты работы в Интернете и другое. Кроме того, мы оказываем услуги создания сайтов и блогов на WordPress с последующим их продвижением, а также занимаемся настройкой и ведением контекстной рекламы Яндекс.Директ и Google Adwords. По поводу сотрудничества просьба обращаться через контакты, все заявки и предложения будут обязательно рассмотрены. При использовании материалов данного сайта, пожалуйста, указывайте прямую индексируемую ссылку на Siteblogger.ru.

«Как создать и продвинуть свой сайт»

2011–2017 © Siteblogger.ru
Рейтинг@Mail.ru