DEMETR Создание сайтов в Казани

Опубликовано

Верстка под retina дисплей

Обновляем свой сайт joomdesign.ru: дизайн, логотип, адаптивная верстка. Но при заходе на сайт с iphone или ipad, которые имеют ретина дисплей видим, что логотип немного размыт. Немного — это если уменьшить масштаб дисплея в два раза, то он будет хорошо смотреться, а так — весь в пикселях.

Градиентные кнопки, тени — это все отлично смотрится через CSS3, а картинки приходится менять. Как это сделать — расскажу ниже.

У нас есть фрагмент верстки

<div class="hlogo"></div>

Кусок из CSS

a.logo{
   display: block;
   width: 190px;
   height: 115px;
   background: url(../images/logo.png) no-repeat #b52727;
}

Умножаем ширину и высоту изображения на 2. Получаем, что логотип должен быть размером 380x250px. Готовим это изображение, кладем рядом с предыдущим.

Теперь в верстке, после подключения основных стилей, добавляем строчку:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="../css/retina.css">

Теперь на всех устройствах с ретина дисплеем будет подключаться дополнительный файл стилей, в котором мы подменим изображение. В файле retina.css пишем:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
   a.logo{
      content:url(../images/logo_retina.png) no-repeat #b52727;
   }
}

Результат:
Верстка под retina дисплей

Верстка под retina дисплей: 4 комментария

  • dimko — 17.05.2013 в 15:42 #

    Высоту логотипа 115пк умножаем на 2 и получаем… 250пк! Хто-та урот.
    Есть ли смысл прописывать правила для ретиновых дисплеев внутри основного css, а не в отдельном css?
    Еще надо поставить resize: vertical для textarea же (на сайте). А то поле ввода можно вправо далеко-далеко утянуть. Негоже!

    [Ответить]

    Demetr - Май 17th, 2013 в 16:07

    >>250пк!
    Молодец, умножил. Под «урот» не понятно, что имелось ввиду.

    >>Есть ли смысл …. а не в отдельном css?
    Внимательно смотрим на href=»../css/retina.css»

    >>Еще надо поставить resize: vertical
    Мне не надо.

    [Ответить]

  • konan2 — 13.11.2014 в 14:11 #

    a.logo{
    content:url(../images/logo_retina.png) no-repeat #b52727;
    }
    имеется ввиду background?

    [Ответить]

    Demetr - Ноябрь 13th, 2014 в 17:16

    Да, все верно. Но сейчас лучше сразу подгружать удвоенное изображение и через background-size задавать размер.

    [Ответить]