Новые единицы измерения в CSS: svh, lvh, dvh 🔸 svw, lvw, dvw

Подписаться 102 тыс.

Просмотров 14 тыс.

50% 1

✅ Оставить заявку на обучение Wordpress - forms.gle/6j9FcjCPcGp9Sfk96
🔥 Лучший ученик с индивидуального тарифа получит реальный заказ
1-й поток был в мае и лучшая ученица уже получила заказ (t.me/tpverstak/4288) Хочешь также? 🥳 Оставляй заявку, чтобы начать обучение во 2-ом потоке и тоже получить реальный заказ!
🟢 Примеры:
tpverstak.ru/live/svh
tpverstak.ru/live/lvh
tpverstak.ru/live/dvh
Таймкоды:
00:00 Вступление
00:31 Передам заказ ученику
01:20 Теория
02:18 svh, lvh, dvh на десктопе
03:15 svh и lvh на планшете
04:53 Как работает dvh?
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Обучение - frontendblok.com/

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 41

@user-yy9wc5dj1s 9 месяцев назад

Круто на 99% 1% не хватило( расшифровать абриавиатуры Если кому будет полезно для запоминания svh, lvh, dvh / svw, lvw, dvw - Small, Large, Dynamic / Viewport / Height, Width

@user-rc6il1et5w 9 месяцев назад

только хотел это сказать и твой коммент увидел)

@tlegenbayangali 9 месяцев назад

Видел недавно лечение данного поведения браузерной панели при помощи js, а тут уже готовые системы измерения подкатили. Спасибо!

@yurok1991 9 месяцев назад

Спасибо!!! Всё разложила по полочкам

@beptojiet4ik485 9 месяцев назад

Буквально сегодня встретился с проблемой, что поисковая строка на мобилках ломает отображение. Решил костылем, но потом это видео само меня нашло. Я даже не знал что есть такие величины и что они используются как раз для этой проблемы с топбаром на мобилках. Спасибо!

@Mozefoka 9 месяцев назад

Все чётко и ясно. Как по мне, то лучше использовать dvh, но ситуации бывают разные

@Liunamme 9 месяцев назад

показалось, что dvh какой то дерганный. мне svh больше зашел

@lemual_omg 9 месяцев назад

согласен, самый универсальный вариант

@Mozefoka 9 месяцев назад

@@lemual_omg 👌🏿

@Magic_key900 9 месяцев назад

Я почти понял, спасибо 👍🏻

@yauheniluzakou2775 9 месяцев назад

Спасибо, до этих едениц, мучался с определением девайса и браузера на котором отрыто, потом минусовал по пикселям размер информационных панелек, получался велосипед с кастомными хуками и большим количеством jsса. В ближайшее время попробую это решение. Интересно как это работает на различных браузерах.

@user-so2ky9vc1r 9 месяцев назад

Анна, помогите пожалуйста, как называется приложение, или программа которая автоматически делает( изменяет ) код при увеличении картинки или шрифта. Спасибо!

@wizardoflightnings6841 9 месяцев назад

Ух ты, какая красотка 😍

@fan-fan-tulpan 9 месяцев назад

Ну вышли новые единицы измерения. А разработчики всех браузера об этом в курсе? Расскажите как организованы процессы обновлений от придумывания новых единиц или свойств до их появления в наших устройствах.

@_webAmoeba 9 месяцев назад

u can use "caniuse"

@windcrack8404 9 месяцев назад

Спасибо за видео. А можно выкатывать в прод, если поддержка по caniuse 79%? FireFox не поддерживает например. 🙂

@rd288 4 месяца назад

А никто не скажет ибо только доку умеют пересказывать, как балаболы. Меня такой же вопрос интересует, везде и все «супер опытные» ребята молчат

@otdyhau 9 месяцев назад

Не совсем непонятно куда такое применять, использую в блоках везде только фиксированную высоту при скролле, - и медиа-запросами подгоняю под мобильные версии устройств. Мне в % более понятно подсчёты делать, как-то привык уже. Это величины скорее для тех кто социальные сети разрабатывает и чтобы видео просмотр формата Тик-Ток подгонять на всю ширину, а по высоте можно - auto применить. Мне непонятно куда это применять.

@Human-de8nf 8 месяцев назад

Скажите пожалуйста может ли один из них лечить дергание и уменьшение экрана при появлении виртуальной клавиатуры смартфона? То есть если использовать dvh экран браузера начнеть уменьшаться и всю что на нем находиться включая кнопки и т д. Можно это избежать без тспользования javascript?

@annblok_webdev 8 месяцев назад

Можно попробовать добавить transition

@user-iz9qp7np4q 9 месяцев назад

Расскажите пожалуйста как биткоин перевести в монеро?

@umnyicoder 9 месяцев назад

Какая у них поддержка в браузерах?

@yurok1991 9 месяцев назад

Почти 90%

@user-yy9wc5dj1s 9 месяцев назад

79.09%

@otdyhau 9 месяцев назад

Если это для формата видео, то я указываю aspect-ratio: 16/9 , 4/3 - и от этого отталкиваюсь чтобы отображать правильные пропорции формата видео -- или формат блока под видео. А для чего это растягивать на всю высоту, только если с применением для height: Calc(100svh - 20%), width: 100%; -- какую-то красоту наводить при скролле - чтобы видели что там снизу ещё есть контент.

@fg5128 7 месяцев назад

px, em, rem, vh, vw, %, теперь ещё эти... svh.. Когда они перестанут курить то что они там курят?

@den1161 5 месяцев назад

Интересно. Все новички пишут - круто, понятно, классно. Я такой с 8-ю годами во фронтэнде иду лесом, так как понятна сама концепция технологии, но информативности нет и примеры слабые.

@whiteltd5970 9 месяцев назад

вода водная, хоть бы обяснили что вы лично будете использовать и на реальном примере ленгинде продемонстировали почему вам подходит конкретное новое правило больше остальных, а так вы новичкам говорите что вы будете использовать если у нас нет представления как оно рабоатет - даже увидев ваш ролик

@yurok1991 9 месяцев назад

Такое ощущение, что видео больше 2 секунд ты осилить не способен. Там сказано, что из-за смещения браузерной строки 100vh нежизнеспособно, а 100dvh подстраивается под любое изменение

@umnyicoder 9 месяцев назад

@@yurok1991ахахаха это правда 😂

@scorpionevil7778 9 месяцев назад

Ни чего не понял из этого объяснения.

@nocomments5529 9 месяцев назад

Не вижу смысла в них, может потом дойдет

@user-rr7yr9ml9p 8 месяцев назад

Сложный пример

@user-vk6yl8th8u 9 месяцев назад

Плохой пример в видео. Очень сложно. С такими видео аудитории будет мало. Почему небыло к примеру сравнение с bootstrap? Просто посмотрел понял, а где его применять когда есть куча алтернатив непонятно. Умников прошу сразу скидывать проекты где применяли!

@leonalex9779 9 месяцев назад

Плохой пример

@arthurglobaltraveling2174 9 месяцев назад

You are a very High level specialist

@jinke5935 9 месяцев назад

Firefox не поддерживает эту новинку. Opera Mini - под вопросом и ещё много других браузеров пока в "экспериментальной дружбе" с этими новыми единицами.