АДАПТАЦИЯ под мобильные устройства. Media queries CSS

Как реализовать #адаптацию под #мобильные #устройства на своем сайте, каким образом адаптировать различные элементы на веб-страничке под разные расширения экранов. В этом помогут #Медиа запросы (#media #queries #CSS) с помощью которых можно творить любые трансформации дизайна странички. Из видео вы узнаете: • Что такое #медио #запросы в #CSS3 • Какие есть типы носителей в media queries • Для чего нужны логические операторы • Как сформировать адаптивный дизайн сайта Подписаться на канал и смотреть уроки первым - https://dwstroy.ru/~dwstv Обсуждение видео: https://youtu.be/x843xbMXkfc Ссылки с урока: Код с урока - https://dwstroy.ru/~IDhbS Типы носителей включают в себя all – по умолчанию; print – просмотра печати; screen – на компьютерных мониторах; speech - речевые синтезаторы; Логические операторы: and – эквивалентно «и»; not – эквивалентно «отрицание»; only – скрывает стили для браузера; , - эквивалентно «или». Условие медиа запроса • width min-width max-width – ширина • height min-height max-height – высота • device-width min-device-width max-device-width – ширина на устройстве • device-height min-device-height max-device-height orientation - высота на устройстве • aspect-ratio min-aspect-ratio max-aspect-ratio – соотношение сторон • device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio - соотношение сторон на устройстве • resolution min-resolution max-resolution – разрешение экрана (количество пикселей) • color min-color max-color – количество бит на каждые из цветных компонентов устройства вывода • color-index min-color-index max-color-index – количество записей в таблице подставноки цветов • monochrome min-monochrome max-monochrome – количество битов на пиксель монохромного устройства • scan grid – сетка сканирования Видео метки: [00:27] - CSS3 медиа запросы или (media queries) [01:11] - Типы носителя в медио запросе [01:45] - Логические операторы в CSS3 [02:19] - Условия медио запросов [03:00] - Описываем основную структуру HTML и CSS [04:30] - Подключаем файл под медио запросы [05:03] - Описываем стили по адаптивные устройства Во время урока я использую: Документацию по Media queries CSS Редактор PhpStorm Использую музыку: RetroVision - Heroes [NCS Release] Elektronomia - Energy [NCS Release] https://www.youtube.com/watch?v=QfhF0V9VlJA https://www.youtube.com/watch?v=fzNMd3Tu1Zw https://soundcloud.com/nocopyrightsounds Смотреть другие видео на канале DWSTV: Сайт с нуля - https://dwstroy.ru/~7KNnM 1С Битрикс работа с сайтом - https://dwstroy.ru/~dEG4q Управление системой Битрикс - https://dwstroy.ru/~Zdt4K Настройки сайта 1С Битрикс - https://dwstroy.ru/~t0UVZ Добавляйтесь к нам в друзья: Сайт видео-уроков: https://dwstroy.ru/video/ Канал в VK автора уроков: https://vk.com/dwstv Канал группы в VK: https://dwstroy.ru/~MJM28 Мы очень рады если видео уроки по Битрикс были Вам полезен, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность,