Звичайний сайт можна переглянути за допомогою мобільного пристрою. Однак, виникають деякі нюанси при перегляді - для читання окремих блоків тексту на відносно невеликому екрані необхідно масштабувати сторінку. Як наслідок, втрачається читабельність, зручність, сайт потрібно постійно перегортати, розтягувати, наближати. Багато елементів управління сайтів незручно використовувати, так як сторінки не розраховані на управління за допомогою дотиків до екрану.

Для вирішення цих проблем почали розробляти сайти, здатні зручно відобразити інформацію на будь-якому пристрої. Іншими словами, сторінка має автоматично підлаштовуватися під роздільну здатність екрану, змінювати розмір картинок і т. д.

Адаптивна верстка передбачає відсутність горизонтальної смуги прокрутки і масштабованих областей при перегляді на будь-якому пристрої, читабельний текст і великі області для клікабельних елементів.

Пошукові системи використовують ряд критеріїв для оцінки адаптивності сайту при перегляді на мобільних пристроях. Google намагається спростити користування Інтернетом для власників смартфонів і планшетів, відзначаючи в мобільній видачі адаптовані під мобільні пристрої сайти спеціальною позначкою mobile-friendly.

Розглянемо основні види версток, їх різницю і основні принципи, які використовуються при їх реалізації. Але для кращого усвідомлення цих принципів варто, спочатку, повторити одиниці виміру для елементів веб-сторінки в css.

Одиниці виміру

Для завдання розмірів різних елементів, в CSS використовуються абсолютні і відносні одиниці виміру. Абсолютні одиниці не залежать від пристрою виведення, а відносні одиниці визначають розмір елемента щодо значення іншого розміру.

Абсолютні одиниці

Абсолютні одиниці застосовуються рідше, ніж відносні і, як правило, при роботі з текстом.

Відносні одиниці

Відносні одиниці зазвичай використовують для роботи з текстом, або коли треба визначити відсоткове співвідношення між елементами.

Значення, що змінюється, залежить від розміру шрифту поточного елементу (він встановлюється через стильову властивість font-size). В кожному браузері встановлений розмір тексту, який застосовується в тому випадку, коли цей розмір явно не заданий. Тому спочатку 1em дорівнює розміру шрифту, заданого в браузері за замовчуванням. Відповідно, встановлюючи розмір тексту для всієї сторінки в em, ми працюємо саме з цим параметром. У тому випадку, коли em використовується для певного елемента, за 1em приймається розмір шрифту його батьківського елемента.

ex визначається як висота символу «x» в нижньому регістрі. На ex поширюються ті ж правила, що і для em, а саме, він прив'язаний до розміру шрифту, заданого в браузері за замовчуванням, або до розміру шрифту батьківського елементу.

Піксель це елементарна точка, яка відображається монітором або іншим подібним пристроєм, наприклад, смартфоном. Розмір пікселя залежить від роздільної здатності пристрою і його технічних характеристик.

Основні техніки реалізації сайтів під будь-роздільну здатність пристрою

Відносні значення

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

Відносні значення для розмірів і відступів

Відносні значення можна задавати для width, height, margin, padding і т. далі. Найвідоміший спосіб завдання відносного розміру - вказівка в відсотках (%).

Нижче наводиться приклад завдання ширини рівної 90% від розміру батьківського компонента.

body {

width: 90%;

}

При цьому значення вираховується відносно батьківського компонента.

Також існують значення відносно розміру екрану:

• vw - viewport width, 1% ширини вікна. При зменшенні ширини вікна, зменшується ширина, висота, шрифт елемента;

• vh - viewport height, 1% висоти вікна. При зменшенні висоти вікна, зменшується ширина, висота, шрифт елемента;

• vmin - viewport minimum, вибирається найменше з vw і vh, тобто відсоток відносно мінімальної сторони;

• vmax - viewport maximum, вибирається найбільше з vw і vh, тобто відсоток відносно максимальної сторони.

Нижче розглянуто приклад використання vw і vh. В даному випадку ширина і висота тега div дорівнюватимуть 50% від ширини і висоти екрану відповідно.

div {

width: 50vw;

height: 50vh;

}

Відносні значення для розміру шрифту

Існують наступні відносні значення для шрифтів:

• em - задає розмір відносно шрифту батька;

• rem - задає розмір відносно шрифту <html>.

Розглянемо приклад:

html {

font-size: 20px;

}

body {

font-size: 1.5em;

}

Обчислимо розмір шрифту для тега body. В даному прикладі розмір шрифту для body задається відносно розміру html. Таким чином, розмір шрифту для body буде дорівнює 30px (20px * 1.5 = 30px).

Також відносні розміри шрифту можна задавати за допомогою %, vw, vh і т. далі. У наступному прикладі розмір шрифту для body дорівнює 80% від розміру шрифту html - 16px.

html {

font-size: 20px;

}

body {

font-size: 80%;

}

Максимальні і мінімальні розміри компонентів

Для завдання максимальних і мінімальних значень ширини і висоти компонента використовуються властивості max-width / min-width і max-height / min-height відповідно.

Розглянемо приклад:

div {

width: 60%;

max-width: 500px;

}

Припустимо, що батьківським компонентом даного div є body. Тоді, при зміні ширини екрану, ширина даного компонента становитиме 60% від ширини body. Однак він буде збільшуватися тільки до величини, визначеної в max-width, це 500px. Як тільки контейнер досягне цієї ширини - він перестане збільшуватися.

Використання медіа-запитів

Медіа-запити дозволяють задати стилі для певного розміру екрана, типу пристрою на основі характеристик пристрою і т. далі. Всі медіа-запити починаються з @media, а далі слідує умова.

За допомогою медіа-запитів можна задати стилі для наступних типів пристроїв:

• all - всі типи (значення використовується за замовчанням);

• braille - пристрої, засновані на системі Брайля, які призначені для читання сліпими людьми;

• embossed - принтери, що використовують для друку систему Брайля;

• handheld - смартфони і аналогічні їм апарати;

• print - принтери та інші друкарські пристрої;

• projection - проектори;

• screen - екран монітора;

• speech - мовні синтезатори, а також програми для відтворення тексту вголос;

• tty - пристрої з фіксованим розміром символів;

• tv - телевізори.

Таким чином, браузер застосовує таблицю стилів тільки в разі, коли активізується вказаний після @media тип пристрою.

Приклад завдання ширини для тегу div, на екранах моніторів, смартфонах і т. п.

@media screen and handheld {

div {

width: 300px;

}

}

Логічні оператори, що застосовуються в медіа-запитах

• and - логічне І. Вказується для об'єднання декількох умов.

Приклад. Стиль для всіх кольорових пристроїв:

@media all and (color) {...}

• not - логічне НЕ. Вказується для заперечення умови.

Приклад. Стиль для всіх пристроїв крім смартфонів:

@media all and (not handheld) {...}

Оператор not має низький пріоритет і оцінюється в запиті останнім, тому вираз

@media not all and (color) {...}

слід розуміти як

@media not (all and (color)) {...}

а не

@media (not all) and (color) {...}

• only - застосовується для старих браузерів, які не підтримують медіа-запити.

Приклад. Стиль для нових браузерів:

@media only all and (not handheld) {...}

У списку немає логічного оператора АБО, його роль виконує кома. Перерахування кількох умов через кому говорить про те, що якщо хоча б одна умова виконується, то стиль буде застосований.

Приклад. Стиль для пристроїв з альбомною орієнтацією або мінімальною шириною 480 пікселів:

@media all and (orientation: landscape), all and (min-width: 480px) {...}

Також при використанні операторів слід вказувати дужки, щоб міняти пріоритет операцій.

Медіа-функції

Медіа-функції задають технічні характеристики пристрою, на якому відображається документ. Стиль застосовується в тому випадку, якщо запит повертає істину, іншими словами, зазначені умови виконуються.

Більшість функцій містять приставки min- і max-, які відповідають мінімальному і максимальному значенню. так, max-width: 400px означає, що ширина вікна браузера менше 400 пікселів, а min-width: 1000px, навпаки, повідомляє, що ширина вікна понад 1000 пікселів.

• aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носія: handheld, print, projection, screen, tty, tv

Значення: ціле число / ціле число.

Визначає співвідношення ширини і висоти області пристрою, яка відображається. Значення вказується в вигляді двох цілих чисел які розділяються між собою слешем (/).

• color (min-color, max-color)

Тип носія: handheld, print, projection, screen, tty, tv

Значення: ціле число.

Визначає число біт на канал кольору. Наприклад, значення 3 означає, що червоний, зелений і синій канал можуть відображати 23 кольорів кожен, що в загальному становить 512 бітів (8 × 8 × 8). Якщо значення не вказано, тоді перевіряється що пристрій кольоровий. У прикладі показана така перевірка.

Приклад. Стиль для кольорових пристроїв:

@media screen and (color) {/ * Для кольорових екранів * /

body {background: # fc0; }

}

@media screen and (min-color:3) { / * Мінімум 512 кольорів * /

body {background: #ccc; }

}

• color-index (min-color-index, max-color-index)

Тип носія: handheld, print, projection, screen, tty, tv

Значення: ціле число.

Визначає кількість кольорів, які підтримує пристрій. У прикладі показаний стиль для екранів, які відображають не менше 256 кольорів.

Приклад. Кольоровий дисплей:

@media all and (min-color-index: 256) {

...

}

• device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носія: handheld, print, projection, screen, tty, tv

Значення: ціле число / ціле число.

Визначає співвідношення сторін екрану пристрою. Значення вказується в вигляді двох цілих чисел які розділяються між собою слешем (/). У прикладі показано, як встановити стиль для екранів із співвідношенням сторін 16 : 9 і більше.

Приклад. «Кіношне» співвідношення:

@media screen and (min-device-aspect-ratio: 16/9) {

...

}

• device-height (min-device-height, max-device-height)

Тип носія: всі крім speech

Значення: розмір.

Визначає всю доступну висоту екрану пристрою або друкованої сторінки.

• device-width (min-device-width, max-device-width)

Тип носія: всі крім speech

Значення: розмір.

Визначає всю доступну ширину екрану пристрою або друкованої сторінки. У прикладі в залежності від роздільної здатності монітора встановлюється ширина макету. Так, для значення 1280 пікселів ширина макета задається як 1100px.

• grid

Тип носія: all

Значення: немає.

Визначає, що цей пристрій з фіксованим розміром символів. Розміри букв на такому пристрої займають однакову ширину і висоту і вибудовуються по заданій сітці. До подібних пристроїв можна віднести термінали, а також телефони, які підтримують тільки один шрифт.

Якщо вам потрібно форматувати текст, не вказуйте його розмір у пікселях, для подібних пристроїв використовується одиниця em.

• height (min-height, max-height)

Тип носія: всі крім speech

Значення: розмір.

Висота області, що відображається.

• monochrome (min-monochrome, max-monochrome)

Тип носія: handheld, print, projection, screen, tty, tv

Значення: ціле число.

Визначає, що пристрій монохромний. Якщо вказано число, то воно означає число біт на піксель. Так, значення 8 рівнозначно 256 відтінкам сірого (або іншого кольору). У прикладі показаний стиль для монохромного і кольорового принтера.

Приклад. Стиль для принтера:

@media print and (monochrome) {

body {font-family: Times, 'Times New Roman', serif; }

h1, h2, p {color: black; }

}

@media print and (color) {

body {font-family: Arial, Verdana, sans-serif; }

h1, h2, p {color: # 556b2f; }

}

• orientation

Тип носія: handheld, print, projection, screen, tty, tv

Значення: landscape | portrait.

Визначає, що пристрій знаходиться в горизонтальному режимі (ширина більше висоти) або портретному (ширина менше висоти).

У прикладі встановлюється різна фонова картинка в разі альбомної (landscape) або портретної орієнтації (portrait).

Приклад. Використання орієнтації пристрою:

@media screen and (orientation: landscape) {

#logo {background: url (logo1.png) no-repeat; }

}

@media screen and (orientation: portrait) {

#logo {background: url (logo2.png) no-repeat; }

}

• resolution (min-resolution, max-resolution)

Тип носія: handheld, print, projection, screen, tv

Значення: роздільна здатність пристрою в dpi (точок на дюйм) або dpcm (точок на сантиметр).

Визначає роздільну здатність пристрою, наприклад, принтера. У прикладі стиль буде працювати для принтера з мінімальною роздільною здатністю 300 точок на дюйм.

Приклад. Роздільна здатність принтера:

@media print and (min-resolution: 300dpi) {

...

}

• scan

Тип носія: tv

Значення: interlace | progressive.

Визначає тип розгортки телевізора - черезрядкова (interlace) або прогресивна (progressive). При черезрядковій розгортці телевізор спочатку показує непарні рядки кадру, потім парні, що дозволяє скоротити обсяг переданих даних При прогресивній розгортці кадр передається і показується цілком.

• width (min-width, max-width)

Тип носія: все крім speech

Значення: розмір.

Описує ширину відображуваної області. Це може бути вікно браузера або друкована сторінка. У прикладі при зменшенні вікна до 600 пікселів і менше змінюється колір фону веб-сторінки.

Приклад. Зміна кольору фону сторінки в залежності від розмірів вікна:

@media screen and (min-width: 0px) and (max-width: 599px) {

body { background-color: red; }

}

@media screen and (min-width: 600px) {

body { background-color: green; }

}