Веб-разработка для новичков. День 4

Василика Климова

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

Василика Климова
Разработчик интерфейсов
Artec 3D

Moscow Coding School

День 4

Типы верстки

Фиксированная верстка

Размеры блоков определены заранее.
Верстка блоков в пикселях.

Фиксированная верстка

Плюсы Минусы

Резиновая верстка

Ширина блоков зависит от размера окна браузера.
Верстка блоков в процентах.

Резиновая верстка

Плюсы Минусы

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

Сайт подстраивается под устройство пользователя.
Может отображать контент по-разному.
Используются CSS медиа-запросы.

Пример

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

Плюсы Минусы

Отзывчивая верстка

Совмещение подходов резиновой и адаптивной верстки.
Блоки зависят от размера браузера.
Используются CSS медиа-запросы.

Пример

Медиа-запросы

Если ширина окна браузера меньше 650 пикселей

@media screen and (max-width: 650px) { }

Отзывчивая верстка

Плюсы Минусы

Свойство position Static

position: static;

Свойство position Relative

position: relative;

Свойство position Absolute

position: absolute;

Свойство position Fixed

position: fixed;

Полезные ссылки

Василика Климова

likita
vasilika.klimova
lik04ka

Навигация

Список всех уроков

Fork me on Github