Современные сайты на данный момент не могут обойтись без мобильной версии. Оно и понятно, многие люди ищут информацию, читают новости с помощью телефона, а при разработке веб-сайта используется разрешение компьютерного экрана, которое не совместимо с телефонными экранами.
Для того, чтобы облегчить жизнь пользователям с телефонами, используется мобильная адаптация. Ее смысл заключается в том, чтобы задать разрешение экрана для разных гаджетов. Например, при разрешении экрана в 1200 пикселей картинка будет одна, а при 800 пикселей - другая.
Думаю, что принцип этой работы понятен для вас. Теперь перейдем к более конкретным деталям, а именно как делается такая адаптация. в ее основе лежит тэг meta. Полный тэг:
<meta name="viewport" content="width=device-width, initial-scale=1">
Такая команда заносится под тэг head и нужна для корректной работы дальнейших команд и тэгов.
Основой адаптирования являются медиазапросы. Медиазапросы это некоторые запросы в html или css, которые позволяют к определенному разрешению экрана подобрать настройки определенных элементов страницы. Например, у нас указано, размер header на компьютерной версии сайта будет 1200 пикселей. Для того, чтобы сделать на мобильном устройстве header другого размера, мы создадим такой медиазапрос в css:
Такой запрос будет означать, что при достижении ширины экрана 800 пикселей, занесенные команды будут выполнены. Давайте добавим что-нибудь сюда:
Теперь мы такой командой указали, что при достижении ширины экрана в 800 пикселей, размер текста в header будет 15 пикселей.
В медиазапросах на определенной ширине можно занести все элементы, которые необходимо изменять в ходе изменении ширины экрана. Стоит быть аккуратными в использовании медиазапросов, и рекомендую вам изучить поближе каждый параметр такого запроса. Спасибо за внимание!