Web - 24 - Адаптивная CSS верстка. Адаптация HTML страницы под экран телефона, планшета, монитора ПК
Рассматриваем принципы Адаптивной верстки на CSS. Знакомимся с типовыми ширинами страницы на экране мобильного телефона, планшета и монитора ПК. Для чего нужна media only screen команда в CSS.
#css #версткасайта #media #flexcss #grid
Язык CSS:
Часть 1: Основы CSS - • Лекция 1.4 - Web - Основы CSS. Селект...
Часть 2: Стили шрифта, текста, цвет и фон, списки - • Лекция 1.5 - Web - Стили CSS: Шрифты,...
Часть 2.1: Отступы и границы - • Лекция 1.5.1 - Web - Отступы Padding,...
Часть 3: Блочная модель в CSS. Позиционирование объектов - • Лекция 1.6 - Web - Блоки и позиционир...
Часть 4: Flexbox в CSS - • Лекция 1.7 - Web - Flex верстка в CSS...
Часть 4.1: Grid в CSS - • Web 1.7 - Grid контейнеры в CSS. Полн...
Часть 5: Верстка на плавающих (FLOAT) блоках - • Лекция 1.8 - Web - Верстка HTML стран...
Полный курс веб-программирование: • Обзор курса WEB-программирование
Содержание:
00:00 - Вступление
00:25 - Обзор разрешений экранов и ширин страниц
03:50 - Принцип адаптации макета под разные размеры окна. Перенос блоков.
07:16 - meta name=viewport content=initial-scale=1
08:40 - media only screen - Задание группы стилей для диапазона ширин экрана
10:14 - Пример задание media only screen блока
16:00 - Типовые пороги адаптации для планшетов и десктопа
18:45 - Каскадирование стилей по порогам адаптации
22:21 - Эмулятор Мобильного Экрана и Инструменты веб-мастера браузера
30:19 - Обзор подходов при адаптации Table, Float, Flex и Grid верстки
34:40 - Адаптация Flex верстки - пример
37:08 - Адаптация Grid верстки - пример
