Jump to content



Toggle %s Welcome to JBZoo community !

English: Please, sign in for contact JBZoo techsupport. Accesses in your Email, which came after the purchase.

Russian: Для того чтобы обратиться в русскую техническую поддержку JBZoo — авторизуйтесь с помощью доступов, которые пришли к вам в письме после покупки. Внимание! Доступ туда имеют только тарифы со знаком «плюс». Подписки JBZoo без "+" форум расценивает как забаненные, поэтому для общения в публичном разделе используйте отдельный аккаунт (легко зайти через социальную сеть). Если форум вас не пускает, почистите куки браузера


Photo
- - - - -

Joomla / Jblank - Делаем сайт адаптивным под мобильные устройства.

jblank css

3 replies to this topic

#1 CB9TOIIIA

CB9TOIIIA
  • Super moderators
  • User rate: 197
  • posts: 2316
  • topics: 215

Posted 07 March 2016 - 19:54

*
POPULAR

Всем привет! Данное видео будет посвящено адаптивной разметке, точнее как сделать из обычного сайта адаптивный. Мне почти каждую неделю на форумах встречаются сообщения, как сделать сайт под мобильные и прочие устройства. Поэтому я думаю это видео поможет Вам понять принцип адаптивности.

Мне обратился клиент с сайтом на Joomla! с просьбой сделать его адаптивным.
Вы можете видеть, что на ПК все прекрасно выглядит - однако если с помощью инспектора кода в Google Chrome проверить его адаптивность - тут все плачевно.
Заголовки неадекватных размеров, блоки выходят за границы и все прелести тут имеются.
 
Хотя и используется Bootstrap в шаблоне.
 
Шаблон кстати хочу сказать тут самописный J!Blank - сам использую - рекомендую.
Вы видите тут LESS разметку - однако - если у Вас простой CSS - можете воспользоваться моим GIST'ом на GitHub'e - вот тоже самое только на ванильном CSS медиа правила.
 
Сама адаптивность это в большинстве случаев - написание правил под условие (ширину экрана пользователя).
Если читать @media правила - то они звучат так:
Если экран пользователя от 220px и например до 480px - то применять вот такие правила.
Заголовок небольшой, текст по центру - слайдер вообще убрать (хотя по уму через jblank - лучше вообще в php условие с mobiledetect сделать).
Далее в видео скучное написание правил конкретно под этот сайт и конечный вид.
 
Всем спасибо за просмотр, подписывайтесь, чтобы не пропустить новые видео!
Пишите в комментариях - что Вам было бы интересно увидеть на моем канале.


 
В скором времени будет небольшой обзор крутого дебаггера - Jdump.
 
GIST: https://gist.github....6907eeb28751186
 
Всем спасибо и удачного дня!
 
Если понравился ролик, нажмите кнопку подписаться, чтобы не пропустить новые видео.
 
 

Edited by CB9TOIIIA, 25 March 2016 - 07:16.

  • 7
Изображение Админ Joomla-support.ru (wfh) / Мой скайп: (skype) cb9t.ru / Изображение JBZoo чат (ninja) (skype) J! Club ¯\_(ツ)_/¯ / Изображение Разработка и работа с Joomla!

#2 user_temasuper

user_temasuper
  • JBZoo User (rus)
  • User rate: 0
  • posts: 50
  • topics: 16

Posted 31 March 2016 - 12:53

Добрый вечер.

Можно ли применить такой способ к моему сайту  да или нет .

 

http://torrehome.com/ru/


Edited by user_temasuper, 31 March 2016 - 12:54.

  • 0

#3 Cheren-dow

Cheren-dow
  • JBZoo Partner
  • User rate: 96.4
  • posts: 5060
  • topics: 31

Posted 31 March 2016 - 13:33

user_temasuper , данный способ можно применить для всех сайтов, только для каждого сайта будут свои стили а смыл в адаптивной верстке CSS не изменяется. 


  • 0
Posted Image
 

#4 CB9TOIIIA

CB9TOIIIA
  • Topic Starter
  • Super moderators
  • User rate: 197
  • posts: 2316
  • topics: 215

Posted 31 March 2016 - 15:23

Все верно, адаптивность = написание CSS  правил под экран пользователя.
 
312140.png312213.png

Edited by CB9TOIIIA, 31 March 2016 - 15:23.

  • 0
Изображение Админ Joomla-support.ru (wfh) / Мой скайп: (skype) cb9t.ru / Изображение JBZoo чат (ninja) (skype) J! Club ¯\_(ツ)_/¯ / Изображение Разработка и работа с Joomla!





Also tagged with one or more of these keywords: jblank, css

Click to return to top of page in style!