Верстка сайта с нуля для начинающих HTML, CSS. Мобильная адаптация. Вступительное видео

• Онлайн школа вебкадемии предлагает адаптировать верстку под разные экраны.  

• Используем медиа запросы для адаптации стилей под мобильные и десктоп экраны.  

• Создаем отдельный файл медиа.css для работы с медиа запросами.  

• Проверяем наличие метатега viewport в HTML-файле.  

• Создаем файл медиа.css и подключаем его после файла main.css.  

• Используем процессор стилей для удобства работы с медиа запросами.  

• Два подхода: мобильный первый и десктоп первый.  

• В мобильном первом подходе стили для мобильных экранов прописываются первыми.  

• В десктоп первом подходе стили для больших экранов прописываются первыми.  

• Выбираем ключевую точку для медиа запросов.  

• Прописываем медиа запросы для экранов от 1200 до 1439 пикселей.  

• Копируем и вставляем медиа запросы для экранов от 992 до 1199 пикселей.  

• Создаем медиа запросы для мобильных экранов от 360 до 767 пикселей.  

• Прописываем стили для контейнера в медиа запросах.  

• Проверяем корректность отображения на разных экранах.  

• Делим экран на два окна для работы с файлами main.css и media.css.  

• Проверяем стили в браузере на разных экранах.  

• Корректируем размеры контейнера для предотвращения горизонтального скролла.  

• Прописываем размеры контейнера для экранов от 992 до 1199 пикселей.  

• Проверяем корректность отображения на планшетах.  

• Прописываем размеры контейнера для мобильных экранов.  

• Прописываем ширину контейнера для экранов от 360 до 767 пикселей.  

• Проверяем корректность отображения на мобильных устройствах.  

• Завершаем настройку стилей для всех экранов.  

• Ограничиваем ширину контейнера до 100%.  

• Проверяем, как контейнер изменяется на разных экранах.  

• На маленьких экранах 360-767 ширина контейнера составляет 100%.  

• На больших экранах 768 и выше ширина контейнера уменьшается до 730.  

• При переходе через точки 992 и 1200 включаются другие стили.  

• При переходе через 1440 работают стили для десктоп версий.  

• Автор прощается и надеется, что объяснение было понятным.  

• Призывает задавать вопросы в комментариях, если что-то непонятно.