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С битрикс.
Watch video Media queries CSS. АДАПТАЦИЯ под мобильные устройства online, duration hours minute second in high quality that is uploaded to the channel Denis Gorelov 25 February 2017. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 89,908 times and liked it 3.3 thousand visitors.
