Адаптивність
Жоден сайт не може вважатися хорошим, якщо він неправильно відображається на мобільних телефонах і планшетах. Сенс створення адаптивних сторінок в тому, щоб змінити оформлення при досягненні певного розміру екрана. Для цього використовується ключове слово @media. В значеннях вказується тип носія, максимальний або мінімальний розмір екрану.
Щоб працювати з цим атрибутом, потрібно задати початкову ширину блоку на великому екрані властивістю max-width: 100%. Зменшуючи екран, відбуваються зміни з блоком:
@media (min-width: 768px) {
.container-small {
//змінюємо ширину пунктів меню, виводимо іконку гамбургера
}
Ця іконка меню грає важливу роль у створенні адаптивного багаторівневого випадаючого горизонтального меню CSS. Являє собою три знаходяться паралельно один одному горизонтальні лінії. Коли користувач натискає на них, з’являються приховані частини альтернативного меню.
