Основные отличия адаптивного дизайна от классического:

1. Корректное отображение интерфейса на любых устройствах. 1 В адаптивном дизайне дизайнер отрисовывает отдельные макеты веб-страниц для смартфонов, планшетов и компьютеров. 1 Разработчик при вёрстке задаёт для каждого макета соответствующие размеры и разрешение экрана. 1 Когда пользователь заходит на сайт, система распознаёт тип его устройства и показывает подходящий вид интерфейса. 1
2. Изменение размеров и расположения элементов. 1 На маленьких экранах многие элементы уменьшают, но не прямо пропорционально размеру экранов, а незначительно, чтобы было удобно читать и смотреть. 1 Чтобы всё уместить, изменяют расположение блоков. 1 Например, на экране ПК пользователь, не перелистывая, видит много информации: заголовки, тексты, картинки, иконки, кнопки. 1 На смартфоне видно меньше элементов — всё рассчитано на скроллинг. 1
3. Использование брейкпоинтов. 2 Брейкпоинты указывают конкретное разрешение экрана, при котором должно произойти изменение дизайна страницы. 2 Смена условий отображения страницы и её элементов происходит в зависимости от ширины экрана посетителя сайта. 2 Элементы могут увеличиваться, уменьшаться, вовсе исчезать или добавляться на страницу. 2