Інструменти розробника для адаптивної та респонсивної верстки

У браузері Chrome можна перевірити як буде виглядати сайт на різних пристроях і при різних ширинах вʼюпорту. Для цього потрібно зайти в інструменти розробника і натиснути кнопку переходу в респонсивний режим відображення (кнопка 1). Щоб вийти з цього режиму потрібно натиснути цю кнопку ще раз.

Натиснувши на кнопку 2 можна обрати віртуальний пристрій для відображення застосунку. Можна вибрати із запропонованих варантів, а можна додати свій варіант натиснувши кнопку Edit. Можна лишити варіант Responsive і самостійно змінювати розмір вʼюпорту.

Керувати розмірами вʼюпорту можна за допомогою меню позначені як кнопки 3.

Також розтягувати та стискати розміри вʼюпорту можна за допомогою перетягування правого чи нижнього його краю (позначки 4).

Щоб змінити масштаб відображення - користуйтеся випадним меню 5.

Щоб обрати орієнтацію відображення горизонтальну чи вертикадьну використовують перемикач 6.