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

Media queries #CSS или как реализовать #адаптацию под #мобильные #устройства на своем сайте, каким образом адаптировать различные элементы на веб-страничке под разные расширения экранов. В этом помогут #Медиа запросы (#media #queries #CSS) с помощью которых можно творить любые трансформации дизайна странички.

Из видео вы узнаете:
• Что такое #медио #запросы в #CSS3
• Какие есть типы носителей в media queries
• Для чего нужны логические операторы
• Как сформировать адаптивный дизайн сайта

Подписаться на канал и смотреть уроки первым - https://dwstroy.ru/~dwstv
Обсуждение видео:    • Media queries CSS. АДАПТАЦИЯ под моби...  

Весь код с урока тут - http://bit.ly/2oQ5JtZ

Типы носителей включают в себя
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]
   • RetroVision - Heroes | House | NCS - ...  
   • Elektronomia - Energy | Progressive H...  
  / 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

Мы очень рады если видео уроки по Битрикс были Вам полезен, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать видео-уроки по 1С битрикс.