Найти тему
Иван Разраб

Адаптивная вëрстка CSS Часть 3

Наглядный пример адаптивной верстки сайта
Наглядный пример адаптивной верстки сайта

После изучения CSS и блочной верстки я принялся изучать адаптивную..

Адаптивная верстка - возможность создавать интерфейс сайта под все габариты экранов.

Обычно под свои разрешения экранов создают отдельные файлы например : в обычном проекте будет от 4 CSS файлов 1) для дэсктопа 2) ноут бук 3) планшет 4) мобильные разрешения.

Так примерно выглядит обращение к другому размеру экрана и присваивания стилей через класс.

Пример адаптивного Css кода
Пример адаптивного Css кода

Весь секрет в написании команды -

@media screen and (max-width ... px) { через точку или решетку обращаемся к классу или айди и назначаем стили как на картинке

}

Вот и вся магия, теперь когда сайт откроют в указанном разрешении которое вы присвоили вместо троеточия ему применятся стили которые были присвоенны в теле media screen()

Жду вашу любезную подписку и лайк это важно для меня и для контента!)