Перейти к содержанию
Официальный форум поддержки Simpla

Рекомендуемые сообщения

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

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

 

Подробнее:

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

 

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

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

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

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

 

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

 

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

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

 

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

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

Изменено пользователем DmitryCH
Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

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

 

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

 

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

 

 

 

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

 

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

 

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

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

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

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...