Адаптивность сайта при помощи CSS стилей

Адаптивность сайта (или отзывчивый веб-дизайн) - одинаково корректное отображение сайта на различных устройствах (компьютер, планшет, смартфон). Принцип адаптивности заключается в возможности сайта динамически подстраиваться под различные разрешения экрана, сохраняя удобство его использования.

Как проверить адаптивность сайта

Для проверки адаптивности сайта не обязательно обладать бесконечно огромным количеством различных мобильных гаджетов с различными разрешениями.

1. Скачиваем браузер Google Chrome и в нем открываем интересующий сайт.
2. Убираем развертку браузера на весь экран и вручную меняем его размер.
3. Чтобы увидеть разрешение экрана при изменении размера, нажимаем клавишу F12.

Есть еще один альтернативный вариант просмотра адаптивности сайта, используя Google Chrome.

1. Скачиваем браузер Google Chrome и в нем открываем интересующий сайт.
2. Нажимаем клавишу F12 (появится панель вебмастера) и нажимаем сочетание клавиш CTRL+SHIFT+M

Отсутствие адаптивности сайта

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

Сайты под управлением Joomla 3 изначально обладают адаптивностью за счет использования фреймворка Bootstrap, который представляет из себя набор CSS стилей. Но этого положительного фактора не всегда достаточно для достижения 100% адаптивности, т.к. помимо стандартного инструментария joomla на сайте могут использоваться сторонние расширения, не обладающие отзывчивым дизайном.

Адаптивность за счет CSS

/* При ширине экрана до 1200px будут применены нижеуказанные CSS стили*/
@media (max-width: 1200px) {
/* CSS стили */ 
body {background-color:#000;}
.uk-button {background: #118EC7; color:#ffffff;}
.uk-button:hover {background:#0D7BAE;}
  }

/* При ширине экрана от 865px до 959px будут применены нижеуказанные CSS стили*/
@media (min-width: 865px) and (max-width: 959px) {
/* CSS стили */ 
body {background-color:#fff;}
.uk-button {background:#000; color:#ffffff;}
.uk-button:hover {background:#343434;}
  }