Обычная (фиксированная) верстка и адаптивная верстка сайтов отличаются тем, как они отображаются на различных устройствах с разными размерами экранов. Вот основные различия между ними в плане стилизации с помощью CSS:
Обычная (фиксированная) верстка:
- Фиксированный размер: Определены жесткие размеры для контейнеров, изображений и других элементов, которые не меняются при изменении размера окна браузера.
- Не учитывает разные устройства: Не адаптируется под разные устройства, такие как мобильные телефоны и планшеты, что может привести к проблемам с отображением.
- Простота создания: Меньше кода и проще в поддержке, но только если сайт не предполагает использование на различных устройствах.
- Нет медиазапросов: В CSS не используются медиазапросы для адаптации под разные размеры экранов.
Адаптивная верстка:
- Динамические размеры: Используются относительные единицы измерения (например, проценты, em, rem), чтобы элементы могли менять размер в зависимости от размера окна браузера.
- Адаптация под разные устройства: Верстка учитывает различные устройства и размеры экранов, обеспечивая оптимальное отображение на них.
- Медиазапросы: В CSS используются медиазапросы, которые позволяют применять разные стили в зависимости от размера экрана, ориентации и других характеристик устройства.
- Больше времени на разработку: Адаптивная верстка требует больше времени и усилий для разработки и тестирования на различных устройствах.
- Большая гибкость: Позволяет создать оптимальный пользовательский опыт для широкого спектра устройств, что сегодня является стандартом для веб-разработки.
В целом, адаптивная верстка является более современным и гибким подходом, позволяющим создать сайт, который хорошо выглядит на любом устройстве, в то время как обычная верстка больше подходит для ситуаций, когда сайт будет использоваться только на стандартных настольных мониторах.
Примеры медиазапросов для адаптивной верстки, и варианты подхода к их написанию : мобайл ферст и десктоп фёрст
Медиазапросы в CSS позволяют адаптировать дизайн сайта под разные размеры экранов и устройства. Вы можете использовать подход «Мобайл Ферст» (Mobile First) или «Десктоп Фёрст» (Desktop First), в зависимости от того, какой дизайн является вашей основной целью.
Мобайл Ферст (Mobile First)
Этот подход означает, что вы сначала стилизуете сайт для мобильных устройств, а затем добавляете медиазапросы для более крупных экранов. Пример:
/* Основные стили для мобильных устройств */
body {
font-size: 14px;
}
/* Стили для планшетов и выше */
@media (min-width: 768px) {
body {
font-size: 16px;
}
}
/* Стили для настольных компьютеров и выше */
@media (min-width: 1024px) {
body {
font-size: 18px;
}
}
Десктоп Фёрст (Desktop First)
Этот подход означает, что вы сначала стилизуете сайт для настольных компьютеров, а затем добавляете медиазапросы для меньших экранов. Пример:
/* Основные стили для настольных компьютеров */
body {
font-size: 18px;
}
/* Стили для планшетов и ниже */
@media (max-width: 1023px) {
body {
font-size: 16px;
}
}
/* Стили для мобильных устройств и ниже */
@media (max-width: 767px) {
body {
font-size: 14px;
}
}
Оба подхода имеют свои преимущества и недостатки. Подход «Мобайл Ферст» часто считается более эффективным, поскольку он заставляет разработчиков сначала сосредоточиться на наиболее ограниченных устройствах, а затем постепенно добавлять функциональность для более крупных экранов.
