Содержание
Видите ли вы разницу между запросами изображений на двух изображениях?
Со всеми Retina MacBook и дисплеями с высоким разрешением по всему миру, в настоящее время обязательно иметь Retina Image для заголовка вашего WordPress сайта.
Non-сетчатки дисплей создает негативное впечатление на читателей.
С очень простыми трюками CSS вы можете достичь того же. Взгляните на простой урок ниже:
Скопируйте код и создайте новый файл retina-crunchify-tips.html , Откройте файл .html в браузере и проверьте результат.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
< ! DOCTYPE html >
< html >
< голова >
<Название> Crunchify советы о том , как включают в себя Retina Логотип для ваша тема WordPress < / title >
< link rel = таблица стилей type = text / css href = crunchify.css >
<Стиль>
.high-resolution-photo {
фоновое изображение : url ( 'https://cdn.crunchify.com/wp-content/icon/crunchify.com@2x.png' ) ;
размер фона : 274px 65 пикселей ;
повторение фона : без повтора ;
дисплей : блок ;
ширина : 274 пикселей ;
высота : 65 пикселей ;
}
.normal-photo {
фоновое изображение : url ( 'https://cdn.crunchify.com/wp-content/icon/crunchify.com.png' ) ;
ширина : 274 пикселей ;
высота : 65 пикселей ;
}
< / head >
< тело >
< div class = high-resolution-photo > < / div >
<Бр>
< div class = normal-photo > < / div >
< / body >
< / html >
|
Если вы используете изображения в качестве фона CSS, вы можете использовать background-size свойство CSS3 для уменьшения изображения для non-retina устройства.
На Crunchify.com мы используем платформу Genesis WordPress . Мы внесли следующие изменения, чтобы он заработал. Для всех остальных стандартных установок WordPress мы создадим новое руководство в течение пары дней. Поэтому, пожалуйста, следите за обновлениями.
Давайте начнем:
Шаг 1
Если ваш размер логотипа 130x65 px затем создайте логотип с двойным размером 260x130 px ,
StandardДисплей логотипа: crunchify.com.pngRetinaДисплей логотипа: crunchify.com@2x.png
Шаг 2
Добавьте ниже код для functions.php файл
|
1
2
3
4
5
6
7
8
9
|
// * Добавить поддержку для пользовательского заголовка
// * Будет отображаться в 130×65 (Бытие)
add_theme_support ( 'custom-header' , массив (
«ширина» = > 260 ,
'рост' = > 130 ,
«заголовка селектор» = > '.site-title a' ,
«заголовок-текст» = > ложный
) ) ;
|
Шаг 3
Добавьте ниже код CSS в style.css файл. Укажите абсолютный путь к вашему логотипу в приведенном ниже коде .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
@ СМИ
только экран и ( — webkit — мин. — устройство — пиксель — соотношение : 2 ) ,
только экран и ( min — moz — устройство — пиксель — соотношение : 2 ) ,
только экран и ( — o — min — устройство — пиксель — соотношение : 2/1),
только экран и ( мин — устройство — пиксель — соотношение : 2 ) ,
только экран и ( min — разрешение : 192dpi ) ,
только экран и ( min — разрешение : 2dppx ) {
, заголовок — изображение , сайт — название > {
плавать : слева ;
min — высота : 130px ;
ширина : 100 % ;
фон : url ( images / crunchify @ 2x.png ) нет — повторить левый верх ! важно ;
фон — размер : 130px 65px ! важно ;
}
, заголовок — изображение , заголовок — область ,
, заголовок — изображение , сайт — название ,
, заголовок — изображение , сайт — название {
max — ширина : 130px ;
min — высота : 65 пикселей ;
набивка : 0 ;
ширина : 100 % ;
плавать : слева ;
поле : 0 ;
}
|
Возможно, вам придется настроить min-height а также width править на title-area а также site-title правило: установите минимальную высоту, равную высоте стандартного логотипа.
Шаг 4
Очистите кэш вашего сайта и перезагрузите блог.
0.00 (0%) 0 votes
