- 05, Apr 2023
- #1
Адаптивный дизайн
Блочная модель документа
Сетки
Наверное, вы видели, как сайт подстраивается под разное разрешение экрана. На десктопе отображается одна версия, на планшетах — немного другая, на мобильных совсем по-другому.
Такой дизайн называется адаптивным, от прилагательного «adaptive», "приспосабливающийся". Также и тут — дизайн подстраивается под пользователя.
К слову, это относится не только к вёрстке, но и к куче других вещей: он может подстраиваться, например, под телевизоры — так как там нет нормальной клавиатуры, дизайн должен учитывать это и предлагать виртуальную для управления кнопками.
Или, например, в зависимости от текущего времени на телефоне, он может менять цветовую схему: днём чёрный текст на белом фоне, а ночью белый текст на чёрном фоне.
Это достаточно удобно, т.к. меньше нагрузка на глаза. Итак, как работать с адаптивным дизайном? Пока что для этого мы возьмём изменение вёрстки — например, какой-то блок не отображается на айфоне. Продолжение:
К слову, это относится не только к вёрстке, но и к куче других вещей: он может подстраиваться, например, под телевизоры — так как там нет нормальной клавиатуры, дизайн должен учитывать это и предлагать виртуальную для управления кнопками.
Или, например, в зависимости от текущего времени на телефоне, он может менять цветовую схему: днём чёрный текст на белом фоне, а ночью белый текст на чёрном фоне.
Это достаточно удобно, т.к. меньше нагрузка на глаза. Итак, как работать с адаптивным дизайном? Пока что для этого мы возьмём изменение вёрстки — например, какой-то блок не отображается на айфоне. Продолжение:
![[Эдгар Куликов] Английский прорыв 4](/assets/images/icons/forum7.png){kind=icon}
![[Сергей Бриз] Каскадное Инвестирование 1.0 СТАРТ + ПРОФИ + МАСТЕР](/assets/images/icons/forum3.png){kind=icon}
![[анастасия Миронова] - Инстаграм Для Девочек 2016](/assets/images/icons/forum6.png){kind=icon}
