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

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

КОМЕНТАРІ • 55

  • @jeanjean4001
    @jeanjean4001 2 роки тому +7

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

  • @vadimv3198
    @vadimv3198 2 роки тому +5

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

  • @romko-romario
    @romko-romario 3 роки тому +3

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

  • @TheDazzlingLady
    @TheDazzlingLady Рік тому +1

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

  • @user-zw9mp2fd7d
    @user-zw9mp2fd7d Рік тому +2

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

  • @iamsabrina2375
    @iamsabrina2375 Рік тому +1

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

  • @easycad6998
    @easycad6998 Рік тому +1

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

  • @kipitok3181
    @kipitok3181 11 місяців тому

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

  • @velessn
    @velessn 3 роки тому +4

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 роки тому

      Пожалуйста)

    • @nouchance
      @nouchance 3 роки тому

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

  • @SlavikDoroshenko
    @SlavikDoroshenko Рік тому +1

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

  • @deli7055
    @deli7055 7 місяців тому

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

  • @user-vv6jx8qg4v
    @user-vv6jx8qg4v 3 роки тому +1

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

  • @My-video123
    @My-video123 3 роки тому

    Спасибо.

  • @SerhiiNesterov
    @SerhiiNesterov Рік тому

    Спасибо

  • @mikevazowski6491
    @mikevazowski6491 2 роки тому

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

  • @user-cw9ev9dq4v
    @user-cw9ev9dq4v 2 роки тому +2

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 роки тому +2

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

    • @user-cw9ev9dq4v
      @user-cw9ev9dq4v 2 роки тому

      @@YauhenKavalchuk спасибо

  • @HA_CTPIME
    @HA_CTPIME Рік тому

    👍👍👍

  • @vladgalekas
    @vladgalekas Рік тому

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

  • @donstacky
    @donstacky Рік тому +1

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

    • @donstacky
      @donstacky Рік тому

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  Рік тому

      👍

  • @JustLeoWotPlay
    @JustLeoWotPlay 3 роки тому +2

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

  • @user-uy3sl7zc5o
    @user-uy3sl7zc5o 4 місяці тому

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

  • @SunRam_
    @SunRam_ Рік тому

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  Рік тому

      🤔

    • @tofutureguest
      @tofutureguest Рік тому +1

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

    • @alekhandro6303
      @alekhandro6303 6 місяців тому

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

  • @xxxxx-iy1lc
    @xxxxx-iy1lc 2 роки тому

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

  • @sergiivishtak5934
    @sergiivishtak5934 Рік тому

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  Рік тому +2

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

  • @ulbolsynzh
    @ulbolsynzh Рік тому

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  Рік тому +1

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

  • @user-ju3sc2ik5v
    @user-ju3sc2ik5v Рік тому

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