Добавление поддержки дисплея Retina в темы WordPress
Поскольку линейка дисплеев Retina постоянно растет, в настоящее время только от Apple, самое время убедиться, что ваша тема WordPress выглядит популярной на этих устройствах. В этой статье я рассмотрю несколько различных вариантов добавления поддержки Retina в ваши темы.
Что такое сетчатка?
Retina Display – это торговая марка, используемая Apple для жидкокристаллических дисплеев, которые имеют достаточно высокую плотность пикселей, чтобы человеческий глаз не мог заметить пикселирование на обычном расстоянии просмотра (http://en.wikipedia.org/wiki/Retina_Display ).
ТАК, КАК ЭТО ВЛИЯЕТ НА ИЗОБРАЖЕНИЯ В ВАШИХ ТЕМАХ?
Типичный монитор составляет 72 пикселей на дюйм или пикселей на дюйм, а дисплей Retina – от 135 до 300 пикселей на дюйм. Что это означает для изображений в вашей теме, хорошо, если изображение 72ppi на стандартном ЖК-мониторе выглядит хорошо, но если потянуть это же изображение на дисплей Retina, оно будет выглядеть чертовски размытым. Как исправить эту ситуацию? Читай, мой друг…
1 CSS3> Изображения
Вероятно, наиболее очевидным вариантом является использование CSS3, при этом поддержка браузеров становится все лучше и лучше с каждым днем - использование свойств CSS3 не составляет труда. Такие вещи, как линейные фоновые градиенты, border-radius, box-shadow и text-shadow в сочетании с RGBA, при совместном использовании, например, могут создавать красивые кнопки, как в примере ниже. Без использования изображений чем меньше HTTP-запросов, тем быстрее загружается ваш сайт.
2 @ 2x изображения
@ 2x, что это такое !? Подумайте об изображениях 72ppi, текущий стандарт как @ 1x, которые отлично смотрятся на обычных дисплеях. Теперь с дисплеями Retina вы видите в основном удвоенное разрешение, вот где в игру вступает @ 2x, имеет смысл, верно? По сути, @ 2x – это стандарт для изображений и графики Retina, который был введен Apple.
При использовании у вас будет файл 72ppi, например, logo.png и еще один logo@2x.png, довольно просто.
КАК ВЫ ОБСЛУЖИВАЕТЕ, ЧТО @ 2X ИЗОБРАЖЕНИЕ ДЛЯ УСТРОЙСТВ RETINA?
Замечательный скрипт Retina.js с открытым исходным кодом позволяет безумно легко передавать изображения с высоким разрешением на устройства Retina. Если существует вариант этого изображения с высоким разрешением, в этом случае logo@2x.png скрипт автоматически заменит это изображение на месте. Просто как тот.
Если вы используете фоновые изображения в CSS, вам понадобится простой медиа-запрос, например:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#menu-icon { background-image: url(../images/icons/menu@2x.png);}
}3 Встроенные элементы img
Допустим, у вас большая фотогалерея, и о создании двух версий каждого изображения просто не может быть и речи. Еще один замечательный сценарий с открытым исходным кодом – Foresight.js, он дает вашей теме возможность определять, может ли пользовательское устройство просматривать изображения с высоким разрешением, до того, как он будет запрошен с сервера. Он также проверяет, имеет ли пользовательское устройство в настоящее время достаточно быстрое сетевое соединение для изображений с высоким разрешением. В зависимости от дисплея устройства и сетевого подключения foresight.js запросит соответствующее изображение для отображения.
4 Иконочные шрифты
Иконочные шрифты просто потрясающие, они бесконечно масштабируемы, могут быть изменены на любой цвет, имеют прозрачные нокауты, изменяют непрозрачность, анимацию с помощью CSS3 и многое другое! Существует довольно много платных решений с открытым исходным кодом. Лично я предпочитаю пакет Font Awesome с открытым исходным кодом, в котором сейчас более 220 иконок, он абсолютно бесплатный для коммерческого использования и чертовски прост в использовании.
Чего же ты ждешь? Начните применять эти практики уже сегодня!
Источник записи: https://www.wpexplorer.com