1. Передмова В даний час частка мобільного трафіку зростає стрімкими темпами. З кожним днем ​​людей,...
2. види версток
3. фіксована верстка
4. гумова верстка
5. адаптивна верстка
6. чуйна верстка
7. Основні техніки реалізації сайтів під будь-дозвіл
8. Відносні значення для розмірів і відступів
9. Відносні значення для розміру шрифту
10. Максимальні і мінімальні розміри компонентів
11. Використання медіа-запитів
12. Посилання по технікам реалізації адаптивної верстки
13. CSS-фреймворки
14. Bootstrap
15. Material Design for Bootstrap
16. Materialize
17. Bulma
18. Pure
19. Висновок

Передмова

В даний час частка мобільного трафіку зростає стрімкими темпами. З кожним днем ​​людей, що використовують девайси з виходом в Інтернет, стає все більше. Телефон завжди під рукою, в будь-якому місці люди можуть подивитися необхідну інформацію, прочитати новини і т. Д. Звичайний сайт можна переглянути за допомогою мобільного пристрою. Однак, виникають деякі нюанси при перегляді - для читання окремих блоків тексту на відносно невеликому екрані необхідно масштабувати сторінку. Як наслідок, втрачається читабельність, зручність, сайт потрібно постійно перегортати, розтягувати, наближати. Багато елементів управління сайтів незручно використовувати, так як сторінки не розраховані на управління за допомогою дотиків до екрану. Для вирішення цих проблем почали розробляти сайти, здатні зручно відобразити інформацію на будь-якому пристрої.

Про статтю

Дана стаття призначена для розробників, які мають досвід верстки сайтів, які знають HTML і CSS, розуміють призначення CSS селекторів і т. Д.

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

види версток

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

фіксована верстка

Фіксована верстка (Fixed Layout) - підхід створення сторінок сайту, які мають задану ширину. Ширина компонентів на сторінці не змінюється. На моніторах з маленьким дозволом з'являється горизонтальна смуга прокрутки. Даний тип верстки не підходить для зручного відображення інформації на мобільних пристроях.
Приклад нижче демонструє суворе завдання ширини для тега body:

гумова верстка

Гумова верстка (Elastic layout) має на увазі можливість компонентів сайту міняти свої розміри в залежності від розміру вікна браузера, розтягуватися від і до зазначених мінімальних і максимальних розмірів. Це досягається завдяки використанню відносних значень, max-width / min-width (максимальна / мінімальна ширина), max-height / min-height (максимальна / мінімальна висота).
Приклади використання технік гумової верстки:

адаптивна верстка

Адаптивна верстка (Adaptive Layout) дозволяє підлаштовуватися основному контейнеру і будь-якого іншого елементу сайту під дозвіл екрану, роблячи можливим змінювати розмір шрифту, розташування об'єктів, колір і т. Д. Відбувається це динамічно, наприклад, з використанням медіа-запитів (@media), дозволяють автоматично визначати дозвіл монітора, тип пристрою і підставляти зазначені значення в автоматичному режимі. У прикладі нижче задається ширина div рівна 960px для всіх пристроїв, ширина яких менше 1200px і 320px для всіх пристроїв, ширина яких менше 480px.

чуйна верстка

Чуйна верстка (Responsive Layout) - це об'єднання гумовою і адаптивної верстки. При цьому підході використовуються як медіа-запити, так і процентне завдання ширини компонентів. Використовуючи даний вид верстки можна з упевненістю сказати, що сайт пристосується до будь-якого пристрою.
Нижче задається ширина div рівна 50% від розміру батьківського компонента для всіх пристроїв, ширина яких менше 1200px і 100% для всіх пристроїв, ширина яких менше 480px.

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

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

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

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

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

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

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

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

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

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

• em - задає розмір щодо шрифту батька;
• rem - задає розмір щодо шрифту <html>.

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

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

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

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

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

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

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

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

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

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

• all - всі типи (значення вікорістовується за умовчанням)
• braille - пристрої, засновані на системе Брайля, Які прізначені для читання сліпімі людьми
• embossed - принтери, что Використовують для друку систему Брайля
• handheld - смартфони и аналогічні Їм апарати
• print - принтери та інші друкарські пристрої
• projection - проектори
• screen - екран монітора
• speech - мовні синтезатори, а такоже програми для відтворення тексту вголос
• tty - пристрої з фіксованим розміром символів
• tv - телевізори.

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

Посилання по технікам реалізації адаптивної верстки

Детальніше переглянути і вивчити розглянуті в даній статті підходи і інші можна за такими адресами:

CSS-фреймворки

CSS -фреймворк - фреймворк, створений для спрощення роботи верстальника, швидкості розробки і виключення максимально можливого числа помилок верстки (проблеми сумісності різних версій браузерів і т. Д.). Дані фреймворки мають на увазі використання різних підходів для коректного відображення сайтів на пристроях будь-якого розміру.
Багато розробники вважають за краще використання CSS -фреймворков, замість прописування усіх стилів вручну. Це обумовлено Наступний причинами:

• Більш швидка розробка
• підтримка кросбраузерності
• Підтримка різних пристроїв і розмірів екранів
• Однаковість коду при роботі в команді дозволяє знизити число розбіжностей при розробці.

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

Розглянемо найпопулярніші CSS -фреймворкі.

Bootstrap

Офіційний сайт:
http://getbootstrap.com/

Найпопулярніший фреймворк для розробки адаптивних і мобільних web-проектів. Bootstrap - це інструмент з відкритим вихідним кодом для розробки сайтів за допомогою HTML, CSS і JS. Bootstrap - інтуїтивно простий і в той же час потужний інтерфейсний фреймворк, що підвищує швидкість і полегшує розробку web-додатків.

Bootstrap легко і ефективно масштабує ваш проект з однією базою коду - від телефонів і планшетів до настільних комп'ютерів. Для цього використовується 12-колоночная сітка:

На додаток до CSS даний фреймворк включає в себе підтримку двох найпопулярніших CSS -препроцессоров: Less і Sass.

Відмінні риси:

• 12 - колоночная сітка
• Велика кількість готових для використання компонентів
• Підтримка Less і Sass
• Використання Normalize.css.

Material Design for Bootstrap

Офіційний сайт:
https://fezvrasta.github.io/bootstrap-material-design/

Material Design for Bootstrap - це інструментарій з відкритим вихідним кодом для розробки додатків, заснований на Bootstrap і використовує підходи Material Design.
Фреймворк дозволяє швидко створювати програму за допомогою змінних Sass, адаптивної сітки, великої кількості готових компонентів і потужних плагінів, реалізованих на jQuery.

Відмінні риси:

• 12 - колоночная сітка
• Велика кількість готових для використання компонентів відповідно до концепції Material Design.

Materialize

Офіційний сайт:
http://materializecss.com/

Materialize - сучасна, адаптивна платформа, побудована на принципі матеріального дизайну. У платформу включений набір компонентів, а також стилі для них. Опрацьовані анімації і ефекти в компонентах, щоб вони були максимально плавними. Всі елементи і анімації інтуїтивні і зрозумілі користувачеві, а єдиний адаптивний дизайн спрощує UX для всіх платформ.

Відмінні риси:

• 12 - колоночная сітка
• Велика кількість готових для використання компонентів відповідно до концепції Material Design
• Підтримка Sass.

Bulma

Офіційний сайт:
http://bulma.io/

Bulma - сучасний CSS -фреймворк заснований на новому способі відображення Flexbox. Flexbox - найсучасніший інструмент компонування, доступний в CSS.

Відмінні риси:

• Використання Flexbox замість колоночной сітки
• Велика кількість готових для використання компонентів
• підтримка Sass
• Не використовуються JS-файли

Pure

Офіційний сайт:
https://purecss.io/

Pure - набір невеликих адаптивних CSS- модулів, які ви можете використовувати в будь-якому веб-проект. Pure побудований на Normalize.css і надає розмітку і стилі для власних HTML-елементів, а також найбільш поширені компоненти користувальницького інтерфейсу. Pure - адаптивний фреймворк, тому елементи відмінно виглядають на всіх розмірах екрану. Pure має мінімальні стилі, що передбачає написання власних кастомізованих стилів.

Відмінні риси:

• 24 - колоночная сітка
• модульний фреймворк
• Не використовуються JS-файли
• Використання Normalize.css
• Мінімальна кількість готових компонентів і стилів.

Висновок

Швидке зростання популярності перегляду сайтів на мобільних пристроях обумовлює необхідність реалізації зручного і читабельною відображення компонентів в незалежності від типу пристроїв і розмірів екранів. Розглянуті в даній статті підходи допоможуть створювати сайти для різних пристроїв і розмірів екранів. Опис CSS -фреймворков спростить вибір відповідного фреймворка для використання в проекті.