меню

Мне приходилось встречать довольно много разные способы определения мониторов retina. Одни являются объемными, другие наоборот. Давайте рассмотрим, какие из media quires изпользовать для ретинизации.

Правильное решение для retina (2x)

  
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* CSS правила для retina */
}
 

Это выражение определяет только ретина дисплеи (2х), но есть еще и дисплеи с device-pixel-ratio больше 1 и меньше 2 — мобильные телефоны. Для них лучше тоже показывать оптимизированные под retina изображения.

У себя в выражении мы проверяем на 120dpi:

  
/* 1.25 dpr */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    /* CSS правила для retina */
}
  

Какой из выражений использовать, решать Вам. Предупреждаем, что если dpi больше 1 и меньше 2, то это мобильное устройство. А если загружать для мобильного устройства оптимизированную под ретина дисплеи графику, то сайт будет дольше загружаться. Что важно для пользователей мобильных устройств.

Правила css-media-resolution

Ответ найдем в поддержке браузерами этих свойств. Открываем caniuse и видим следующее:

Поддержка Media Queries в браузерах

Зеленые столбцы и столбцы с номером 1 — поддерживают min/max resolution с единицами измерения dpi, а столбцы с номером 3 — поддерживают -webkit-device-pixel-ratio. То есть нам требуются только эти два свойства.

Старые правила (не используйте)

  
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1) {
  /* CSS правила для retina */
}
  

или

  
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
  /* CSS правила для retina */
}
 

Возможно, вам будет интересно

Треугольники по средствам CSS

На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место.

17 CSS/HTML эффектов с кроссбраузерными решениями

Когда вы хотите добиться какого-либо эффекта, то не беретесь каждый раз изобретать велосипед, всегда проще взять готовый кусок кода. И если у вас уже есть такой фрагмент кода, который реализует нужный вам функционал (и при этом вы понимаете, как он работает), то вы просто применяете его.

Как отключить преобразование телефонных номеров в ссылки в мобильных браузерах

Браузер для BlackBerry, Android и Safari для IOS (iPhone / IPod / IPad) автоматически обнаруживает телефонные номера и адреса электронной почты на веб страницах и преобразует их в ссылки. Если вам это не надо, используйте следующие мета-теги. Для Safari (iPhone…Подробнее »

Кроссбраузерная стилизация select на CSS

В данной статье приведен пример стилизации select'а на чистом CSS для Chrome, Safari, Firefox и IE9+ без добавления дополнительных элементов.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту