Jump to content

Recommended Posts

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

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

 

Подробнее:

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

 

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

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

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

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

 

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

 

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

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

 

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

 

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

Link to post
Share on other sites

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

 

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

 

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

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

Edited by DmitryCH
Link to post
Share on other sites

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

 

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

 

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

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

 

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

 

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

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

Link to post
Share on other sites

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

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

 

 

 

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

 

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

 

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

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...