11. Единицы измерения в CSS - px, %, em, rem, vw, vh. Относительные и абсолютные величины

Поділитися
Вставка
  • Опубліковано 21 гру 2024

КОМЕНТАРІ • 30

  • @LEO-cu1fn
    @LEO-cu1fn 14 днів тому +2

    Ещё раз чётко понятно профессионально раньше использовал только px но теперь наконец то % и самое важное em rem

  • @svitboomer8840
    @svitboomer8840 Рік тому +8

    Ухххх, сочно. Жду как правильно/удобно управляться размером шрифта на странице

  • @yourbestquestion
    @yourbestquestion Рік тому +5

    Привет, Саша, спасибо за ролики.

  • @alexb.2616
    @alexb.2616 Рік тому +2

    Спасибо за em, rem и вьюпортединицы! Наконец-то это улеглось в башке.

  • @Phucking
    @Phucking Місяць тому +2

    Просто невероятно что я вас нашел, подача просто потрясающая, спасибо огромное

  • @Ivanfwit
    @Ivanfwit Рік тому +3

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

  • @MuiKot_
    @MuiKot_ 2 місяці тому +2

    уроки просто бомба

  • @colodatwin3102
    @colodatwin3102 Рік тому +6

    Круто, жду каждые ваши уроки с нетерпением) Кашу в голове приводите в порядок) Сейчас как раз верстаю макет, решил в этот раз сверстать всё на rem , а оказывается в этом смысла нет) Я думаю так лучше, лишь потому что в настройках браузера можно будет изменять шрифт, если не задавать его html тегу изначально, есть ли в этом смысл?
    Да и плагин есть удобный в VS code , кнопку нажал px в rem перевелись) Ну или миксины в scss использовать.
    Всё таки тема, что лучше использовать не до конца раскрыта, надеюсь на практике увидим)

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +6

      > Я думаю так лучше, лишь потому что в настройках браузера можно будет изменять шрифт, если не задавать его html тегу изначально, есть ли в этом смысл?
      Смысл в rem есть, но нужно использовать его осознанно и не везде. Я не вижу в нём смысла, т. к. есть масштабирование окна браузера, которое пропорционально будет изменять интерфейс и, если сайт грамотно адаптирован, пользователь получит то, что хочет: более мелкий текст при уменьшенном масштабе и более крупный при увеличенном.
      > Да и плагин есть удобный в VS code , кнопку нажал px в rem перевелись) Ну или миксины в scss использовать.
      Когда-то и я использовал подобную вещь. Преобразовал в проекте в rem'ы вообще всё: от font-size до border-width. Это было ужасно :)
      > Всё таки тема, что лучше использовать не до конца раскрыта, надеюсь на практике увидим)
      Да, разумеется, в мастер-классах я это всё объясню. Спойлерну немного: всё через хитрую формулу в calc и vw-единицы и, желательно, через миксины препроцессора стилей.

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

      @@AleksanderLamkov Охринеть....

  • @smotritelyoutube
    @smotritelyoutube Рік тому +4

    Like!!! Super

  • @ВадимАлекс-щ6ъ
    @ВадимАлекс-щ6ъ Місяць тому +1

    спасибо)

  • @Anatoli-bq1pe
    @Anatoli-bq1pe 6 місяців тому +1

    Классный ролик! Большое спасибо

  • @bormna
    @bormna 6 місяців тому +1

    шикарный контент! Благодарю

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

    Александр что за грамотный метод изменения размера шрифта ? Есть уже видео на эту тему ?

    • @AleksanderLamkov
      @AleksanderLamkov  6 місяців тому +2

      На канале есть два мастер-класса по верстке, в обоих применён вполне современный метод через clamp и vw:
      Для новичков:
      ua-cam.com/play/PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN.html
      Для продвинутых:
      ua-cam.com/play/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3.html&si

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

    долго я обходил стороной em, rem единицы, с остальными уже знаком как год. я понял как работают em и rem, но где использовать их? я даже не представляю. и для чего? чем эти единицы могут быть полезны по сравнению с px или %?

    • @AleksanderLamkov
      @AleksanderLamkov  6 місяців тому +2

      Пример с em:
      Заголовок, внутри часть текста с мЕньшим или бОльшим шрифтом. Заголовку задаем размер в пикселях, а внутрянке заголовка - в em'ах, чтобы финальный font-size зависел от фонтсайза заголовка. На адаптиве меняется фонтсайз заголовка, ну а его внутренний элемент с em единицами в фонтсайзе, автоматически подстраиваться под новые условия.
      Пример с rem:
      Задаем в html {} фонтсайз 10px, затем всем уровням заголовкам задаем всё в rem. На адаптиве уменьшаем лишь значение фонтсайз в html {}, а размер заголовков пропорционально уменьшится автоматически.

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

      @@AleksanderLamkov так, с rem все понятно, спасибо большое. а вот насчет em, если я создам заголовок с font-size: 1em, внутри помещу span элемент, с font-size: 0.5em, то span ведь будет равен 8px? Так как 1em по умолчанию это 16px, или я ошибаюсь?

    • @AleksanderLamkov
      @AleksanderLamkov  6 місяців тому +2

      em для font-size - это коэффициент от font-size родительского элемента
      em для других свойств - это коэффициент от font-size текущего элемента
      Заголовку указываем font-size 30px.
      Дочернему элементу заголовка font-size 0.5em, который фактически вычислится браузером в 15px.

  • @slamedesign
    @slamedesign 3 місяці тому

    7500 просмотров на ролике? лол что? Где алгоритмы ютуба? Тут минимум должно быть тысяч 200.....

    • @sjdjjsjsjs3991
      @sjdjjsjsjs3991 12 днів тому +1

      Тебе правда хочется +200k конкурентов на вакансию junior frontend разработчика?

  • @uzver3787
    @uzver3787 4 місяці тому

    меня на собесе по lvh dvh нагнули немножечко)

    • @AleksanderLamkov
      @AleksanderLamkov  4 місяці тому

      О, ну это довольно свежие единицы измерения. Удивлен, что про них уже где-то спрашивают 🙃
      Кстати, на канале был про это ролик:
      ua-cam.com/video/aNGyq7j0yYA/v-deo.htmlsi=TSSQIblGYEnSGTWO

    • @uzver3787
      @uzver3787 4 місяці тому

      @@AleksanderLamkov да. Мобайл верст подход, поэтому сразу с этого. Ещё про clamp)

  • @Юджин-й4ч
    @Юджин-й4ч 4 місяці тому

    frontend РАЗРАБОТЧИК!?

  • @АлексейКоваленко-н2ч
    @АлексейКоваленко-н2ч 10 місяців тому

    Как на уроке. Быстро, не акцентируя внимания, монотонно, чтение по тексту

    • @AleksanderLamkov
      @AleksanderLamkov  10 місяців тому +7

      А надо как? Как монолог в стендапе? Медленно? Хлопать в ладоши, привлекая внимание? Не использовать продуманный сценарий, а импровизировать? За этим вам на другие каналы.

    • @frelas1903
      @frelas1903 Місяць тому +1

      лучше уж так, чем слушать получасовое мэканье, бэканье, где вся информация на 5 минут...