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

1. приклад
2. Що використовують для оптимізації сайту під мобільні пристрої?
3. приклад
4. Основні властивості метатега <viewport>
5. приклад
6. Медіа-запити. CSS-стандарт Media Queries
7. типи носіїв
8. Логічні оператори
9. Основні медіа-функції
10. приклад
11. Нові одиниці розмірів (vw, vh, rem)
12. приклад
13. приклад
14. Flexbox
15. приклад
16. Адаптивна верстка таблиць

Наша взаимовыгодная связь https://banwar.org/

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

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

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

приклад

Приклад адаптивної верстки - сайт domportretov.ru , Де сторінки адаптується під кілька інтервалів ширини вікна браузера, зберігаючи максимальний комфорт для відвідувача:

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

1. просто міняти розмір екрана браузера,
2. розташувати праворуч панель інспектора компонентів і змінювати її ширину,
3. використовувати адаптивний дизайн браузера, натиснувши Ctrl + Shift + M в Firefox або Google Chrome.

Що використовують для оптимізації сайту під мобільні пристрої?

метатег viewport

Мобільні браузери, типові для сторінку сайту за сторінку для звичайного комп'ютера і масштабує її по ширині екрану телефону. В результаті текст стає дрібним, і відвідувачеві, щоб його прочитати, доводиться збільшувати масштаб сторінки.

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

Щоб повідомити браузеру, що сторінка адаптується до будь-яких пристроїв, в заголовок документа додають метатег viewport.

приклад

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Основні властивості метатега <viewport>

width Ширина видимої області. Рекомендоване значення: device-width. height Висота видимої області. Рекомендоване значення: device-height. initial-scale Початковий масштаб сторінки. Приймає значення від 1 до 5. Рекомендоване значення: 1. minimum-scale Мінімальний масштаб сторінки. Приймає значення, яке має бути менше або рівним initial-scale. Значення 1 забороняє зменшити масштаб сторінки. maximum-scale Максимальний масштаб сторінки. Приймає значення, яке має бути більше або рівним initial-scale. Значення 1 забороняє збільшення масштабу сторінки. user-scalable Дозволяє або забороняє можливість масштабування сторінки. Приймає значення true або false.

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

Це відбувається, якщо якихось елементів задана велика фіксована ширина.

Щоб не з'являлася горизонтальна прокрутка, ширину сторінки задають на весь екран, при необхідності обмежуючи її властивістю max-width.

приклад

.content {width: 100%; max-width: 1200px; }

Медіа-запити. CSS-стандарт Media Queries

Можливість застосовувати різне оформлення залежно від ширини вікна дає CSS-стандарт Media Queries.

Медіа-запит починається з правила @media, після якого слід умова застосування стилів, що складається з типу носія (в наведеному прикладі all), логічного оператора (and) і медіа-функції (max-width: 360px).

типи носіїв

all Всі типи. print Принтери і інші друкарські пристрої. screen Екран монітора. speech Мовні синтезатори і програми для відтворення тексту вголос. Наприклад, мовні браузери. Застарілі, хоча і коректні типи, які не дають результату braille Пристрої, засновані на системі Брайля, які призначені для читання сліпими людьми. embossed Принтери, що використовують для друку систему Брайля. handheld наладоннике, смартфони, пристрої з малою шириною екрану. projection Проектор. tty Пристрої з фіксованим розміром символів (телетайпи, термінали, пристрої з обмеженнями дисплея). tv Телевізори.

Логічні оператори

and Логічне І. Вказується для об'єднання декількох умов. not Логічне НЕ. Вказується для заперечення умови. Оператор not оцінюється в запиті останнім. only Ключове слово для старих браузерів, які не підтримують медіа-запити і вважають only типом носія. Але так як такого типу не існує, то весь стиль цілком ігнорується. Сучасні браузери сприймають медіа-запит з only і без only однаково. , Логічне АБО. Перерахування кількох умов через кому означає, що якщо хоча б одна умова виконується, то стиль буде застосований.

Основні медіа-функції

width
(Min-width, max-width) Ширина вікна браузера. device-width
(Min-device-width, max-device-width) Ширина екрана пристрою. height
(Min-height, max-height) Висота вікна браузера. device-height
(Min-device-height, max-device-height) Висота екрану пристрою. orientation Орієнтація пристрою. Приймає значення portrait (портретна), якщо ширина менше висоти або landscape (альбомна), якщо ширина більше висоти.

приклад

Заданий розмір заголовка:

h1 {font-size: 72px; }

На великому екрані комп'ютера такий заголовок виглядає нормально, але для вертикального екрану смартфона він занадто великий. Для екранів, ширина яких менше або дорівнює 360px, можна зменшити розмір шрифту за допомогою медіа-запиту:

@media all and (max-width: 360px) {h1 {font-size: 42px; }}

Нові одиниці розмірів (vw, vh, rem)

vw 1% від ширини вікна браузера (viewport). vh 1% від висоти вікна браузера (viewport).

Завдяки цим одиницям тепер в CSS стало легко вказати відносну висоту елемента.

приклад

body {min-height: 100vh; }

Розмір шрифту при адаптивної верстці зручно задавати в rem (root em). Ця одиниця виміру обчислюється на основі розміру шрифту кореневого елементу <html>. За замовчуванням 1rem = 16px. Для простоти обчислень розмір шрифту кореневого елементу можна задати рівним 10px.

приклад

html {font-size: 10px; } Body {font-size: 1.6rem; } H1 {font-size: 7.2rem; } @Media all and (max-width: 360px) {body {font-size: 1.4rem; } H1 {font-size: 4.2rem; }}

Flexbox

Зараз прийнято займати всю ширину вікна браузера. При цьому активно використовуються горизонтальні списки, які добре виглядають і зручно читаються на екрані настільного комп'ютера. Але на екрані мобільного пристрою елементи такого списку стають занадто вузькими. Треба перетворювати горизонтальний список в вертикальний.

Специфікація Flexbox дозволяє контролювати розмір, порядок і вирівнювання елементів по горизонталі і вертикалі, розподіл вільного місця між ними. Блоки при цьому можуть стискатися і розтягуватися за заданими правилами, займаючи потрібний простір.

Flexbox визначає CSS властивості для flex-контейнера і його дочірніх елементів (в наведеному прикладі відповідно ul.flex і li.flex).

приклад

ul.flex {display: flex; / * Flex-контейнер * / flex-wrap: wrap; / * Багатостроковий режим * / justify-content: space-between; / * Елементи розподіляються рівномірно (перший - на початку рядка, останній - в кінці) * /} li.flex {display: inline-block; flex-basis: 260px; / * Базова ширина елемента * / flex-grow: 1; / * Всі елементи однакової ширини * / max-width: 300px; padding: 8px; }

В результаті: елементи списку розтягуються на всю доступну ширину (з обмеженням в 300px):

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

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

Адаптивна верстка таблиць

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

1. Таблиця з горизонтальною прокруткою . Найпростіший метод. Треба задати для елементів таблиці white-space: nowrap; і помістити таблицю в блок з overflow-x: scroll.
2. Таблиця з невидимими стовпцями . Суть методу полягає в тому, що на екрані з маленькою шириною ховаються менш важливі стовпці.
3. перевернута таблиця . Таблиця транспонується, тобто стовпці перетворюються з рядка за рахунок застосування display: inline-block. Таким чином, <thead> таблиці стає першим стовпцем, а для <tbody> використовується {overflow-x: auto; white-space: nowrap;}
4. Більше не таблиця . Метод заснований на використанні data-атрибутів .

Читати далі: @media screen для мобільних пристроїв