Автор Тема: Шаблон на весь экран  (Прочитано 678 раз)

30 Июля 2013, 09:19:26
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Привет. Пытаюсь сделать шаблон на весь экран.
На компе делал разными способами, получается примерно следующее, что вроде бы то, что нужно.



Но когда открываю сайт на планшете, правая колонка переносится вниз какбы на след строчку, т.к вылазит за границы экрана.

Что делать или что я делаю не так? :)
30 Июля 2013, 09:20:40
Ответ #1
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Как сделать чтоб на всех устройствах на всех разрешениях результат был один и тот же? Я вроде и в %, а не px уже пытался задавать ширину, но всё одно и то же пока.
30 Июля 2013, 09:35:13
Ответ #2
  • Партнер
  • Ветеран
  • ****
  • Сообщений: 22126
  • Репутация: +17110/-1
  • Разработка веб-сайтов и веб-программирование
    • Просмотр профиля
Цитата: kulich
Как сделать чтоб на всех устройствах на всех разрешениях результат был один и тот же? Я вроде и в %, а не px уже пытался задавать ширину, но всё одно и то же пока.
Это нужно переделать тему. Так как эта тема не подхолит под responsive-дизайн.
Для таких задач можно использовать Bootstrap - Динамический дизайн
Интернет-магазин под ключ.
Какой выбрать движок для интернет магазина ?
Какой движок лучше ?
Magento или Prestashop ?
Решение всех Ваших вопросов в создании Интернет-магазина.
30 Июля 2013, 10:02:24
Ответ #3
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо! Но я, если честно, ничего особо не понял там пока)
30 Июля 2013, 10:22:02
Ответ #4
  • Партнер
  • Ветеран
  • ****
  • Сообщений: 22126
  • Репутация: +17110/-1
  • Разработка веб-сайтов и веб-программирование
    • Просмотр профиля
Делаете стили для разных устройств
/* Landscape - телефоны */
@media (max-width: 480px) { ... }
     
 /* От ландшафтного экрана телефона до потретного планшета */
@media (max-width: 767px) { ... }
   
 /* От портретного планшета до ландшафтного экрана и настольных дисплеев */
@media (min-width: 768px) and (max-width: 979px) { ... }
     
/* Большой дисплей */
@media (min-width: 1200px) { ... }
Тогда везде будет смотреться красиво. Это не значит, что одинаково.
Интернет-магазин под ключ.
Какой выбрать движок для интернет магазина ?
Какой движок лучше ?
Magento или Prestashop ?
Решение всех Ваших вопросов в создании Интернет-магазина.
30 Июля 2013, 10:38:52
Ответ #5
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Я толком не понимаю, что такое Бутстрэп в принципе. То есть где я должен писать разные стили под разные устройства?
Почему я не могу это в глобал.цсс всё просто прописать?
30 Июля 2013, 12:16:25
Ответ #6
  • Ветеран
  • *****
  • Сообщений: 32999
  • Репутация: +26759/-0
    • Просмотр профиля
Можно менять и в global.css, только много и долго.
Расчитывай ширину колонок и блоков в %, шрифт в em для всех шаблонов и для всех разрешений. Отступы, границы тоже не забуть переопределить.
Плюс, для картинок (иконки, изображения) тоже нужен ресайз в зависимости от разрешения.
Еще нужно будет прятать или менять блоки, которые будут мешать на мобильных устройствах. В основном это менюшки, большие слайдеры, вставки видео.

Если использовать готовые библиотеки, как  Bootstrap, то сделаешь быстрее.
30 Июля 2013, 12:30:33
Ответ #7
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
А как подключать то эту библиотеку готовую? :)
Сорри за тупые вопросы, но можете мне по-простому объяснить общий порядок действий.
Типа сначала я в каких-то файлах бутстрэпа описываю стили для разных устройств, затем то, затем сё.

Программист из меня никакой, но разобраться хочется. Спасибо)
30 Июля 2013, 18:36:59
Ответ #8
  • Фрилансер
  • *
  • Сообщений: 242
  • Репутация: +3/-0
    • Просмотр профиля
Можно смотреть уроки  по Bootstrap Framework http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/