Сьогодні все рідше і рідше можна зустріти новий веб-сайт, який би не мав адаптивного дизайну або мобільної версії, призначеної спеціально для мобільних девайсів. За допомогою CSS можна легко створити дизайн, який буде підлаштовуватися під пристрої з будь-якою шириною екрану. Використовуючи спеціальні правила, ви можете визначити зовнішній вигляд веб-сторінки в залежності від ширини вікна браузера.
Як правило, повноцінна версія сайту виглядає дивно на звичайному смартфоні. Щоб розглянути текст, користувачеві доводиться користуватися збільшенням і горизонтальною прокруткою. З іншого боку, сайт у вигляді однієї вузької колонки буде виглядати ще більш дивно на широкому комп'ютерному моніторі.
Адаптивний веб-дизайн (англ. Responsive web design, RWD) - це підхід до створення веб-сторінок, при якому їх зовнішній вигляд визначається через CSS, грунтуючись на ширині вікна браузера. Це дозволяє забезпечити зручний дизайн для будь-якого пристрою, без необхідності створення декількох різних сайтів.
CSS-інструменти для адаптивного дизайну
В адаптивному веб-дизайні використовуються гнучкі grid-системи, масштабовані зображення і спеціальні медіа-запити CSS (деякі з них ми вже використовували в практичних уроках підручника).
Гнучка сітка життєво необхідна, оскільки в нашому світі існує величезна кількість пристроїв, і кожне зі своїм розміром дисплея. Тому просто неможливо створити фіксований розмір макета, який би красиво вписався в екран будь-якої ширини. Потрібна розмітка, яка може розширюватися і звужуватися (разом з контентом), підлаштовуючись під екран конкретного пристрою.
Медіа-запити - це CSS-технологія, яка дозволяє визначати умови для відображення тих чи інших стилів. Наприклад, ви можете задати один набір CSS-правил для екранів шириною менше 768 пікселів, другий - для ширини понад 991 пікселів і т. Д.
Також через медіа-запити можна визначати тип пристрою (екран монітора, принтер, мовної синтезатор), співвідношення сторін екрану, орієнтацію (альбомна або книжкова), дозвіл дисплея і багато іншого. Все це дає можливість створювати специфічні стилі, з огляду на безліч нюансів.
Налаштування для адаптивного дизайну
Коли на мобільному пристрої проглядається сайт без адаптивного дизайну, браузер повністю поміщає його в ширину екрану. При цьому він виглядає, як на ілюстрації зліва:
Джерело: developers.google.com
Це називається зменшенням масштабу сторінки, і саме таким чином браузер відображає неадаптівние сайти. Щоб скористатися таким сайтом, користувачеві доведеться збільшувати масштаб вручну, а також прокручувати сторінку по горизонталі.
Якщо ж дизайн вашого сайту адаптивен, вам необхідно додатково повідомити про це браузеру. Робиться це легко - просто додайте всередину тегаследующую рядок:
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
Даний мета-тег говорить браузеру, що ширина контенту повинна бути рівна ширині екрана браузера, яка в свою чергу дорівнює ширині екрану пристрою, з якого проглядається веб-сторінка. Initial-scale контролює рівень масштабування при завантаженні сторінки.
До слова, вказівку цього мета-тега важливо і для Google: при його відсутності система не буде сприймати веб-сторінку як ту, що адаптована під мобільні пристрої.
Далі в підручнику: медіа-запити CSS .
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.