Как сделать иконки для retina дисплея в CSS?

С появлением Retina дисплеев головной боли у frontend-разработчиков значительно добавилось.

Чтобы на четком ретиновском дисплее наши графические иконки и картинки не выглядели уныло, нужно сделать следующее:

  1. Сделать копию нашей иконки icon.png (16px на 16px, к примеру), размером в 2 раза больше и назвать ее icon@2x.png (тогда 32px на 32px).
  2. Прописать в css следующее:
div.icon{
  width:16px;
  height: 16px;
  background: url('icon.png') 0 0 no-repeat;
  background-size: 16px 16px;
  -webkit-background-size: 16px 16px;
  -moz-background-size: 16px 16px;
  -o-background-size: 16px 16px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
  div.icon{
    background: url('icon@2x.png') 0 0 no-repeat;
  }
}

Таким образом для ретина дисплеев покажется более качественная картинка, но в том же размере.

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

19 Января 2016
Последние новости
29 Сентября 2016
Создан интернет-магазин для компании «Надеко»
29 Июля 2016
Создан сайт для компании «ACS Termal»
Сделать заказ
Нужен интернет-магазин?