Урок 27. Основи адаптивного дизайну

background-image: url(...)

image: url(...)

src: url(...)

background: img(...)

<section>

<footer>

<article>

<main>

background-size: cover

background-repeat: no-repeat

background-position: center

background-size: 100% 100%

<meta name="responsive">

<meta name="mobile">

<meta name="viewport">

<meta name="media">

Зробити сайт швидшим.

Зробити сайт читабельним на всіх пристроях.

Додати на сайт анімації.

Змінити шрифти на сайті.

Встановлює ширину екрана рівною ширині пристрою.

Змінює колір фону.

Підключає CSS-стилі.

Завантажує зображення.

Для вбудовування відео.

Для додавання коментарів.

Для застосування стилів за певної умови (напр., розмір екрана).

Для імпорту шрифтів.

Якщо ширина екрана більша за 768px.

Якщо висота екрана менша за 768px.

Якщо екран є мобільним.

Якщо ширина екрана менша або дорівнює 768px.

width: 33%;

display: none;

width: 100%;

position: absolute;

width

display

text-shadow

color

Покращує SEO (пошукову оптимізацію).

Покращує досвід користувача на мобільних пристроях.

Це єдиний спосіб додати <iframe>.

Це єдиний спосіб стилізувати форми.

<title>

<style>

<link rel="stylesheet">

<meta name="viewport">