Мне обратился клиент с сайтом на 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