Новые единицы измерения в CSS: svh, lvh, dvh 🔸 svw, lvw, dvw
ฝัง
- เผยแพร่เมื่อ 29 มิ.ย. 2024
- ✅ Оставить заявку на обучение 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/
Уже пригодилось! Сенкъю!)
Спасибо!!! Всё разложила по полочкам
Видел недавно лечение данного поведения браузерной панели при помощи js, а тут уже готовые системы измерения подкатили. Спасибо!
Круто на 99%
1% не хватило(
расшифровать абриавиатуры
Если кому будет полезно для запоминания
svh, lvh, dvh / svw, lvw, dvw - Small, Large, Dynamic / Viewport / Height, Width
только хотел это сказать и твой коммент увидел)
Я почти понял, спасибо 👍🏻
Спасибо, до этих едениц, мучался с определением девайса и браузера на котором отрыто, потом минусовал по пикселям размер информационных панелек, получался велосипед с кастомными хуками и большим количеством jsса. В ближайшее время попробую это решение. Интересно как это работает на различных браузерах.
Все чётко и ясно. Как по мне, то лучше использовать dvh, но ситуации бывают разные
показалось, что dvh какой то дерганный. мне svh больше зашел
согласен, самый универсальный вариант
@@lemual_omg 👌🏿
Буквально сегодня встретился с проблемой, что поисковая строка на мобилках ломает отображение. Решил костылем, но потом это видео само меня нашло. Я даже не знал что есть такие величины и что они используются как раз для этой проблемы с топбаром на мобилках. Спасибо!
Ух ты, какая красотка 😍
Ну вышли новые единицы измерения. А разработчики всех браузера об этом в курсе?
Расскажите как организованы процессы обновлений от придумывания новых единиц или свойств до их появления в наших устройствах.
u can use "caniuse"
Не совсем непонятно куда такое применять, использую в блоках везде только фиксированную высоту при скролле, - и медиа-запросами подгоняю под мобильные версии устройств.
Мне в % более понятно подсчёты делать, как-то привык уже.
Это величины скорее для тех кто социальные сети разрабатывает и чтобы видео просмотр формата Тик-Ток подгонять на всю ширину, а по высоте можно - auto применить.
Мне непонятно куда это применять.
Если это для формата видео, то я указываю aspect-ratio: 16/9 , 4/3 - и от этого отталкиваюсь чтобы отображать правильные пропорции формата видео -- или формат блока под видео.
А для чего это растягивать на всю высоту, только если с применением для height: Calc(100svh - 20%), width: 100%; -- какую-то красоту наводить при скролле - чтобы видели что там снизу ещё есть контент.
Анна, помогите пожалуйста, как называется приложение, или программа которая автоматически делает( изменяет ) код при увеличении картинки или шрифта. Спасибо!
Какая у них поддержка в браузерах?
Почти 90%
79.09%
Спасибо за видео. А можно выкатывать в прод, если поддержка по caniuse 79%? FireFox не поддерживает например. 🙂
А никто не скажет ибо только доку умеют пересказывать, как балаболы. Меня такой же вопрос интересует, везде и все «супер опытные» ребята молчат
Скажите пожалуйста может ли один из них лечить дергание и уменьшение экрана при появлении виртуальной клавиатуры смартфона? То есть если использовать dvh экран браузера начнеть уменьшаться и всю что на нем находиться включая кнопки и т д. Можно это избежать без тспользования javascript?
Можно попробовать добавить transition
Расскажите пожалуйста как биткоин перевести в монеро?
Интересно. Все новички пишут - круто, понятно, классно. Я такой с 8-ю годами во фронтэнде иду лесом, так как понятна сама концепция технологии, но информативности нет и примеры слабые.
px, em, rem, vh, vw, %, теперь ещё эти... svh..
Когда они перестанут курить то что они там курят?
Ни чего не понял из этого объяснения.
Не вижу смысла в них, может потом дойдет
вода водная, хоть бы обяснили что вы лично будете использовать и на реальном примере ленгинде продемонстировали почему вам подходит конкретное новое правило больше остальных, а так вы новичкам говорите что вы будете использовать если у нас нет представления как оно рабоатет - даже увидев ваш ролик
Такое ощущение, что видео больше 2 секунд ты осилить не способен. Там сказано, что из-за смещения браузерной строки 100vh нежизнеспособно, а 100dvh подстраивается под любое изменение
@@yurok1991ахахаха это правда 😂
Сложный пример
Плохой пример в видео. Очень сложно. С такими видео аудитории будет мало. Почему небыло к примеру сравнение с bootstrap? Просто посмотрел понял, а где его применять когда есть куча алтернатив непонятно. Умников прошу сразу скидывать проекты где применяли!
Плохой пример
You are a very High level specialist
Firefox не поддерживает эту новинку. Opera Mini - под вопросом и ещё много других браузеров пока в "экспериментальной дружбе" с этими новыми единицами.
ничего ек понял, но очень интересно(((
жесть...ничего не понятно из объяснения..проще наверное спеку прочитать
можешь не читать
поддержка 79.09%
все верно, можешь не читать.
всё-таки веб-разработка для умных, а ты если даже по видео ничего не понял, то дальше тебе не осилить.