Jump to content


Photo
- - - - -

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

jblank css

3 replies to this topic

#1 CB9TOIIIA

CB9TOIIIA
  • Administrators
  • User rate: 230.6
  • posts: 3680
  • topics: 235

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

#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 User (rus)
  • User rate: 95.7
  • posts: 5060
  • topics: 31

Posted 31 March 2016 - 13:33

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


  • 0
Изображение
 

#4 CB9TOIIIA

CB9TOIIIA
  • Topic Starter
  • Administrators
  • User rate: 230.6
  • posts: 3680
  • topics: 235

Posted 31 March 2016 - 15:23

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

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

  • 0





Click to return to top of page in style!