TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Добавление поддержки дисплея Retina в темы WordPress

48

Поскольку линейка дисплеев 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 Иконочные шрифты


Добавление поддержки дисплея Retina в темы WordPress

Иконочные шрифты просто потрясающие, они бесконечно масштабируемы, могут быть изменены на любой цвет, имеют прозрачные нокауты, изменяют непрозрачность, анимацию с помощью CSS3 и многое другое! Существует довольно много платных решений с открытым исходным кодом. Лично я предпочитаю пакет Font Awesome с открытым исходным кодом, в котором сейчас более 220 иконок, он абсолютно бесплатный для коммерческого использования и чертовски прост в использовании.

Чего же ты ждешь? Начните применять эти практики уже сегодня!

Источник записи: https://www.wpexplorer.com

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. ПринимаюПодробнее