CSS3 #22 Медиазапросы (Media queries)

#YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZbin: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

[@jeanjean4001]

Все четко и по делу. Речь хорошая, приятно слушать. Спасибо автору!

[@YauhenKavalchuk]

Спасибо большое)

[@vadimv3198]

Очень понятно и доступно, как всегда. Спасибо за вашу работу!

[@YauhenKavalchuk]

Спасибо за отзыв)

[@romko-romario]

Благодарю! Лучшее видео по теме: просто, доступно, исчерпывающе. Лайк и подписка!

[@YauhenKavalchuk]

Спасибо за отзыв

[@easycad6998]

Бальзам для ушей коротко и ясно....Спасибо

[@YauhenKavalchuk]

Всегда пожалуйста

[@velessn]

Спасибо Женя. Как всегда информативно.

[@YauhenKavalchuk]

Пожалуйста)

[@nouchance]

@@YauhenKavalchuk спасибо большое

[@TheDazzlingLady]

Очень понятно и доходчиво. Спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@user-zw9mp2fd7d]

Спасибо тебе друг, так понятно объясняешь!

[@YauhenKavalchuk]

Пожалуйста

[@iamsabrina2375]

кратко и ясно, спасибо БОЛЬШОЕ ИМЕННО ЭТО Я И ИСКАЛА!!

[@YauhenKavalchuk]

Пожалуйста

[@kipitok3181]

всё очень ясно и понятно, подобные ролики мотивируют, спасибо большое

[@YauhenKavalchuk]

Всегда пожалуйста

[@SlavikDoroshenko]

Как всегда полезно!

[@YauhenKavalchuk]

👍

[@deli7055]

Спасибо, все коротко и по делу, автору развития канала и удачи

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-vv6jx8qg4v]

Жека как всегда Крутой!

[@YauhenKavalchuk]

Спасибо!

[@My-video123]

Спасибо.

[@YauhenKavalchuk]

Пожалуйста

[@user-cw9ev9dq4v]

интересно было бы увидеть полезные медиазапросы, которые часто на работе применяют

[@YauhenKavalchuk]

По сути, самые часто используемые это медиазапросы min-width и max-width. Все остальные - это специфичные случаи для решения узких задач

[@user-cw9ev9dq4v]

@@YauhenKavalchuk спасибо

[@SerhiiNesterov]

Спасибо

[@YauhenKavalchuk]

Пожалуйста

[@vladgalekas]

Евгений, почему на 3:10 в первом примере (да и во втором тоже) между двумя условиями (screen и (min-width: 320px)) отсутствует какой-либо оператор? И почему, при этом, в третьем примере оператор есть между всеми условиями?

[@donstacky]

Спасибо за урок! Я правильно понимаю, что поменять цвет фона страницы или хотя бы отдельного элемента при печати (в окне предварительного просмотра) не получится?

[@donstacky]

Разобрался) Оказывается нужно просто включить печать фоновых цветов и изображений в настройках браузера 😀

[@YauhenKavalchuk]

👍

[@HA_CTPIME]

👍👍👍

[@YauhenKavalchuk]

👍

[@mikevazowski6491]

Merci beaucoup, лайк за объяснение

[@YauhenKavalchuk]

👍

[@user-uy3sl7zc5o]

почему при изменении min-width например на 980 px минимальный диапазон перестает работать

[@xxxxx-iy1lc]

как убрать в media "br" , но при этом, чтобы в некоторых моментах он был в тексте ? а то он убирается по всему тексту

[@YauhenKavalchuk]

Не понял вопроса(

[@SunRam_]

Привет я начинающий в том деле, сделал сайт через HTML and CSS, но вот остановился на адаптивности медиа запроса,это когда сайт делаешь размер до ноутбука,планшета и телефона сайт становится ужасным и все элементы расходятся, хотя в других видео там меняют некоторые стили чтобы под любые устройства адаптировался размер экрана

[@YauhenKavalchuk]

🤔

[@tofutureguest]

Указывайте width/height в процентах, никогда не используйте пиксели.

[@alekhandro6303]

​@@tofutureguest Небольшое уточнение: не только в процентах, лучше использовать разные относительные единицы в зависимости от задачи (%, vm, vh, em, ex и т.д.)

[@JustLeoWotPlay]

Спасибо) только ratio читается по другому - "рейшио".

[@YauhenKavalchuk]

Учту)

[@sergiivishtak5934]

Очень хорший урок. Хотелось бы узнать сколько требуется медиа запросов, чтобы зделать хороший адаптивный сайт?

[@YauhenKavalchuk]

Я не могу ответить на этот вопрос. Это зависит от того сколько у вас элементов, как они располагаются и сколько перестроений планируется

[@user-ju3sc2ik5v]

То есть что есть у тебя якобы на сайте ты должен всех по одному адаптировать под нужные разрешения экрана? Ну это кнопки , ссылки, текст, фото и т.д ?

[@YauhenKavalchuk]

Да

[@ulbolsynzh]

как в рем и ем и в % адаптацию делать?)

[@YauhenKavalchuk]

адаптивность для шрифтов делается следующим образом: 1. на все размеры шаблона устанавливаются относительные единицы 2. на body устанавливается абсолютный размер 3. при изменении размера экрана изменять размер только на body Таким образом, благодаря относительным единицам размер будет достаточно менять только в одном месте