Перейти к содержимому


Фото
- - - - -

адаптация шаблона - вопрос


  • Чтобы отвечать, сперва войдите на форум
4 ответов в теме

#1 xikarx

xikarx
  • Пользователь
  • 33 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Омск

Опубликовано 26.07.2019 - 09:20

Час добрый, товарищи программисты.

Подскажите, кому не трудно, как сделать адаптацию в шаблоне под мобильные устройства.

 

Подробнее:

шаблон сверстан колонками, по образу и подобию Bootstrap.

 

Общая ширина - class="column sixteen"

хедер поделен на 4 и 12 колонок.

при ширине экрана меньше 767px - контент складывается в одну колонку и там все отлажено.

однако, при ширине экрана от 767 до 990px - было бы красивее иметь деление хедера на 6 и 10 колонок.

 

вопрос: кому не трудно, напишите пожалуйста код, как изменять прописанный к дивам класс в зависимости от ширины экрана устройства.

 

полагаю это должно быть что-то типа 

<div {if ширина экрана овер 990px - то }class=four column" else class=six column"">

 

к несчастью про пхп знания ограничиваются вот примерно такмими измыщлениями, синтаксисом не владею..  :(

 

заранее благодарен.



#2 shooroop

shooroop
  • Фрилансер
  • 995 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Antarktida

Опубликовано 26.07.2019 - 09:51

@media css загуглите и в



#3 DmitryCH

DmitryCH
  • Пользователь
  • 42 сообщений
  • Пользователь
  • Версия CMS:2.x
  • Откуда:Москва

Опубликовано 26.07.2019 - 11:08

shooroop прав, гуглите @media css. Вам нужно найти в файлах шаблона сайта файл с расширением .css и в нем вносить правки.

 

В вашем случае будет выглядеть примерно так:

 

@media (min-width: 767px) and (max-width: 990px) {
   .class_name{
      width: такая-то;
      еще что-то;
      ...
   }
}

З.Ы: это не PHP, а HTML и CSS. И HTML и CSS - это не языки программирования. Первый - это язык разметки документа, а второй - язык стилевой разметки документа (каскадные таблицы стилей)


Изменено: DmitryCH, 26.07.2019 - 11:11


#4 xikarx

xikarx
  • Пользователь
  • 33 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Омск

Опубликовано 26.07.2019 - 15:54

shooroop прав, гуглите @media css. Вам нужно найти в файлах шаблона сайта файл с расширением .css и в нем вносить правки.

 

В вашем случае будет выглядеть примерно так:

 

@media (min-width: 767px) and (max-width: 990px) {
   .class_name{
      width: такая-то;
      еще что-то;
      ...
   }
}

З.Ы: это не PHP, а HTML и CSS. И HTML и CSS - это не языки программирования. Первый - это язык разметки документа, а второй - язык стилевой разметки документа (каскадные таблицы стилей)

 

@media css загуглите и в

 

уважаемые, про css и медиазапросы я знаю. Смысл как раз в том - можно ли изменять верстку в зависимости от разрешения экрана? т.е. именно то, что я привел в примере. Ведь скрипт движка определяет девайс с которого смотрят сайт? 

Короче, возможно сделать как меня интересует, или правильнее/проще медиа-запросами в стилях делать?



#5 shooroop

shooroop
  • Фрилансер
  • 995 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Antarktida

Опубликовано 26.07.2019 - 21:31

уважаемые, про css и медиазапросы я знаю. Смысл как раз в том - можно ли изменять верстку в зависимости от разрешения экрана? т.е. именно то, что я привел в примере. Ведь скрипт движка определяет девайс с которого смотрят сайт? 

Короче, возможно сделать как меня интересует, или правильнее/проще медиа-запросами в стилях делать?

 

 

 

медиа запросы.. скрипты могут быть отключены у конечнго пользователя

 

можете вертеть свой шаблон как хотите от конечного устройства

 

- медиа запросами

-smarty определение устройства и подсовывания своего шаблона от устройства но при этом вам надо в двух *.tpl править данные это лишняя работа

-js подключением определения ширины экраны и смены классов это тоже гиморой - у юзера отключены скрипты и писать отдельные правила для js а если вдруг решите шаблон переверстать останется лишний не нужный код






0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых