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

Рет қаралды 33,958

3 жыл бұрын

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

Пікірлер: 55

@jeanjean4001 2 жыл бұрын

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

@YauhenKavalchuk 2 жыл бұрын

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

@romko-romario 3 жыл бұрын

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

@YauhenKavalchuk 3 жыл бұрын

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

@vadimv3198 2 жыл бұрын

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

@YauhenKavalchuk 2 жыл бұрын

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

@TheDazzlingLady Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

Пожалуйста

@velessn 3 жыл бұрын

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

@YauhenKavalchuk 3 жыл бұрын

Пожалуйста)

@nouchance 3 жыл бұрын

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

@user-zw9mp2fd7d Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

Пожалуйста

@iamsabrina2375 Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

Пожалуйста

@easycad6998 11 ай бұрын

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

@YauhenKavalchuk 11 ай бұрын

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

@kipitok3181 11 ай бұрын

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

@YauhenKavalchuk 11 ай бұрын

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

@SlavikDoroshenko Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

👍

@deli7055 7 ай бұрын

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

@YauhenKavalchuk 7 ай бұрын

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

@user-vv6jx8qg4v 3 жыл бұрын

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

@YauhenKavalchuk 3 жыл бұрын

Спасибо!

@My-video123 3 жыл бұрын

Спасибо.

@YauhenKavalchuk 3 жыл бұрын

Пожалуйста

@SerhiiNesterov Жыл бұрын

Спасибо

@YauhenKavalchuk Жыл бұрын

Пожалуйста

@user-cw9ev9dq4v 2 жыл бұрын

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

@YauhenKavalchuk 2 жыл бұрын

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

@user-cw9ev9dq4v 2 жыл бұрын

@@YauhenKavalchuk спасибо

@HA_CTPIME Жыл бұрын

👍👍👍

@YauhenKavalchuk Жыл бұрын

👍

@mikevazowski6491 2 жыл бұрын

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

@YauhenKavalchuk 2 жыл бұрын

👍

@donstacky Жыл бұрын

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

@donstacky Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

👍

@vladgalekas Жыл бұрын

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

@user-uy3sl7zc5o 4 ай бұрын

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

@JustLeoWotPlay 3 жыл бұрын

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

@YauhenKavalchuk 3 жыл бұрын

Учту)

@SunRam_ Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

🤔

@tofutureguest Жыл бұрын

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

@alekhandro6303 6 ай бұрын

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

@sergiivishtak5934 Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

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

@xxxxx-iy1lc 2 жыл бұрын

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

@YauhenKavalchuk 2 жыл бұрын

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

@ulbolsynzh Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

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

@user-ju3sc2ik5v Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

Да