Рассматриваем принципы Адаптивной верстки на CSS. Знакомимся с типовыми ширинами страницы на экране мобильного телефона, планшета и монитора ПК. Для чего нужна media only screen команда в CSS.

#css #версткасайта #media #flexcss #grid

Язык CSS:
Часть 1: Основы CSS - https://youtu.be/2bYzY2VsDxc
Часть 2: Стили шрифта, текста, цвет и фон, списки - https://youtu.be/IGK1L9GfMFs
Часть 2.1: Отступы и границы - https://youtu.be/W1sdXf6EXpU
Часть 3: Блочная модель в CSS. Позиционирование объектов - https://youtu.be/qfrdnWxKMV0
Часть 4: Flexbox в CSS - https://youtu.be/a6ongLiF1oI
Часть 4.1: Grid в CSS - https://youtu.be/vTfzL-CYnXU
Часть 5: Верстка на плавающих (FLOAT) блоках - https://youtu.be/8gSz7AM12hY

Полный курс веб-программирование: https://youtu.be/0rKu6vKL01s

Содержание:
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 верстки - пример