Please enable JavaScript.
Coggle requires JavaScript to display documents.
Техніки адаптивної верстки - Coggle Diagram
Техніки адаптивної верстки
Адаптивне верстання – підхід, що припускає зміну дизайну залежно від поведінки користувача, розміру екрана, платформи і орієнтації девайса. Іншими словами, сторінка повинна автоматично підлаштовуватися під дозвіл, змінювати розмір картинок і так далі.
У темі веб-дизайну і розробки ми швидко наближаємося до точки, коли ми будемо не здатні справлятися з нескінченними новими дозволами і екранами. Для багатьох веб-сайтів створення окремої версії для кожного нового дозволу буде неможливим або, принаймні, непрактчним.
Увесь дизайн – мікс адаптивних шарів, картинок і в деяких місцях розумної розмітки. Створення адаптивних шарів – часта практика, що не можна сказати про адаптивні картинки. Тому нижче представлена техніка для реалізації гнучких картинок:
Hiding and Revealing Portions of Images;
Creating Sliding Composite Images;
Foreground Images That Scale With the Layout.
Типи адаптивних макетів:
Одна з найголовніших проблем, яка потребує розв’язання при роботі з адаптивним дизайном, – це робота з картинками. Є багато способів змінювати розмір зображень, і більшість з них реалізується дуже просто. Один з таких прикладів – використання max – width у CSS:
img {max-width: 100%;}
Для надзвичайних змін розмірів ми можемо захотіти змінити розташування елементів у цілому через окремий файл зі стилями або, що ефективніше, через CSS-медіазапит. Це не повинно викликати особливо багато проблем, оскільки більшість стилів залишаться колишніми, але деякі зміняться.
Для надзвичайних змін розмірів ми можемо захотіти змінити розташування елементів у цілому через окремий файл зі стилями або, що ефективніше, через CSS-медіазапит. Це не повинно викликати особливо багато проблем, оскільки більшість стилів залишаться колишніми, але деякі зміняться.
