адаптация под 4к разешение - PrestaShop CMS :: Русская поддержка интернет-магазина PrestaShop

адаптация под 4к разешение

ruleoffdv

Cпециалист
Сообщений: 209
Регистрация: 05-05-2013

# 1

18-05-2016 11:40

добрый день скоро все перейдут на высокое разрешение экрана.
4к и 5к.Уже статистика показывает посещения с таким разрешением

связи с этим хотелось бы подготовить свою верстку сайта и изображений к этой эволюции.

Как сделать возможность

1.Определить разрешение экрана(на основе него давать изображение)

Скажем нет смысла загружать большие изображение для 5к на мобильном телефоне.

1. для мобильных разрешением ( до 600) - имя файла картинки "-mobile"
2. для планшетов разрешением (с 900 до 1200) - имя файла картинки "-tablet"
3. для Компьютеров с разрешением обычным (c 1200 до 1700) - имя файла картинки "-pc"
4. для Компьютеров с разрешением 4k (c 1700 до 2200) - имя файла картинки "-4k"
5. для Компьютеров с разрешением 5k (c 2200 до 2700) - имя файла картинки "-5k"

Сообщение отредактировал ruleoffdv (18-05-2016 12:47)

Щелкните, и это сообщение будет добавлено в ваш ответ как цитата

Алекс

Администратор
Сообщений: 4516
Откуда: Красноярск
Регистрация: 29-05-2009

# 2

18-05-2016 16:37

Цитата:( ruleoffdv @ 18-05-2016 12:40 Смотреть сообщение )

Как сделать возможность
1.Определить разрешение экрана(на основе него давать изображение)

В этом нет необходимости в html5 добавлен srcset.
Пример:

Код:

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" srcset="{$link->getImageLink($product.link_rewrite, $product.id_image, '5k')|escape:'html':'UTF-8'} 2700w, {$link->getImageLink($product.link_rewrite, $product.id_image, '4k')|escape:'html':'UTF-8'} 2200w" />

Оказываю услуги по администрированию интернет-магазина на CMS PrestaShop, написание модулей для PrestaShop. Большой опыт работы с CMS PrestaShop.

ruleoffdv

Cпециалист
Сообщений: 209
Регистрация: 05-05-2013

# 3

27-05-2016 12:59

Цитата:( Алекс @ 18-05-2016 17:37 Смотреть сообщение )

Цитата:( ruleoffdv @ 18-05-2016 12:40 Смотреть сообщение )

Как сделать возможность
1.Определить разрешение экрана(на основе него давать изображение)

В этом нет необходимости в html5 добавлен srcset.
Пример:

Код:

Спасибо =)
Вам нужно на форуме сделать функцию (кнопку решено) если вопрос решен