Перейти к содержимому


Фотография
- - - - -

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

jblank css

Сообщений в теме: 3

#1 CB9TOIIIA

CB9TOIIIA

Отправлено 07 March 2016 - 19:54

*
Популярное сообщение!

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

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


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

Сообщение отредактировал CB9TOIIIA: 25 March 2016 - 07:16

  • 7

#2 user_temasuper

user_temasuper

Отправлено 31 March 2016 - 12:53

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

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

 

http://torrehome.com/ru/


Сообщение отредактировал user_temasuper: 31 March 2016 - 12:54

  • 0

#3 Cheren-dow

Cheren-dow

Отправлено 31 March 2016 - 13:33

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


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

#4 CB9TOIIIA

CB9TOIIIA

Отправлено 31 March 2016 - 15:23

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

Сообщение отредактировал CB9TOIIIA: 31 March 2016 - 15:23

  • 0





Темы с аналогичным тегами jblank, css

Click to return to top of page in style!