xikarx Опубликовано 26 июля, 2019 Жалоба Поделиться Опубликовано 26 июля, 2019 Час добрый, товарищи программисты.Подскажите, кому не трудно, как сделать адаптацию в шаблоне под мобильные устройства. Подробнее:шаблон сверстан колонками, по образу и подобию Bootstrap. Общая ширина - class="column sixteen"хедер поделен на 4 и 12 колонок.при ширине экрана меньше 767px - контент складывается в одну колонку и там все отлажено.однако, при ширине экрана от 767 до 990px - было бы красивее иметь деление хедера на 6 и 10 колонок. вопрос: кому не трудно, напишите пожалуйста код, как изменять прописанный к дивам класс в зависимости от ширины экрана устройства. полагаю это должно быть что-то типа <div {if ширина экрана овер 990px - то }class=four column" else class=six column""> к несчастью про пхп знания ограничиваются вот примерно такмими измыщлениями, синтаксисом не владею.. заранее благодарен. Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 26 июля, 2019 Жалоба Поделиться Опубликовано 26 июля, 2019 @media css загуглите и в Цитата Ссылка на сообщение Поделиться на другие сайты
DmitryCH Опубликовано 26 июля, 2019 Жалоба Поделиться Опубликовано 26 июля, 2019 (изменено) shooroop прав, гуглите @media css. Вам нужно найти в файлах шаблона сайта файл с расширением .css и в нем вносить правки. В вашем случае будет выглядеть примерно так: @media (min-width: 767px) and (max-width: 990px) { .class_name{ width: такая-то; еще что-то; ... } }З.Ы: это не PHP, а HTML и CSS. И HTML и CSS - это не языки программирования. Первый - это язык разметки документа, а второй - язык стилевой разметки документа (каскадные таблицы стилей) Изменено 26 июля, 2019 пользователем DmitryCH Цитата Ссылка на сообщение Поделиться на другие сайты
xikarx Опубликовано 26 июля, 2019 Автор Жалоба Поделиться Опубликовано 26 июля, 2019 shooroop прав, гуглите @media css. Вам нужно найти в файлах шаблона сайта файл с расширением .css и в нем вносить правки. В вашем случае будет выглядеть примерно так: @media (min-width: 767px) and (max-width: 990px) { .class_name{ width: такая-то; еще что-то; ... } }З.Ы: это не PHP, а HTML и CSS. И HTML и CSS - это не языки программирования. Первый - это язык разметки документа, а второй - язык стилевой разметки документа (каскадные таблицы стилей) @media css загуглите и в уважаемые, про css и медиазапросы я знаю. Смысл как раз в том - можно ли изменять верстку в зависимости от разрешения экрана? т.е. именно то, что я привел в примере. Ведь скрипт движка определяет девайс с которого смотрят сайт? Короче, возможно сделать как меня интересует, или правильнее/проще медиа-запросами в стилях делать? Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 26 июля, 2019 Жалоба Поделиться Опубликовано 26 июля, 2019 уважаемые, про css и медиазапросы я знаю. Смысл как раз в том - можно ли изменять верстку в зависимости от разрешения экрана? т.е. именно то, что я привел в примере. Ведь скрипт движка определяет девайс с которого смотрят сайт? Короче, возможно сделать как меня интересует, или правильнее/проще медиа-запросами в стилях делать? медиа запросы.. скрипты могут быть отключены у конечнго пользователя можете вертеть свой шаблон как хотите от конечного устройства - медиа запросами-smarty определение устройства и подсовывания своего шаблона от устройства но при этом вам надо в двух *.tpl править данные это лишняя работа-js подключением определения ширины экраны и смены классов это тоже гиморой - у юзера отключены скрипты и писать отдельные правила для js а если вдруг решите шаблон переверстать останется лишний не нужный код Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.