Представляю диалог: " - Дизайн макет подразумевает при разрешении 1024w размер шрифта 18px. Почему у тебя 19px? - мне было лень написать один медиа и я решил выебнуться динамическим расчётом расчетом шрифта. - красавчик! Теперь всегда пиши так, чтобы мы не понимали, какой будет размер шрифта при конкретном расширении. "
@@Graderim Бездумно копировать никто не станет, иначе такую абракадабру даже видеть не захочеться, обычно все переписывается в своем стиле, со своими так сказать зависимостями, и как раз адаптивность явно будет плюсом ибо мы пишем резиновый дизайн, а не тупорный под определенный экран. Грубо говоря при плавной смене ширины ничего не должно никуда вылезти и меняться плавно и без огрехов.
@@mike.fireson наши разрабы делают, что бы точно так же как в фигме все было. Вплоть до названия переменных. Что бы единооьразие было. Но и дизайнеры у нас знакомы с базовой вёрсткой. У нас за границы ничего не вылетает, потмоу что мы просто рисуем десктоп и мобилку и масштабмоуем с сохранением пропорций под любой экран.
@@Graderim Бывают просто моменты, где одинаковое отображение можно изобразить разными правилами, к примеру более удобными для себя, либо теми, которые при смене ширины экрана будут автоматом пропорции отступов или соотношений сторон удерживать, конечно это все наверное индивидуально, но как почитал комменты, и сами дизайнеры не против подобного, им просто нужно как-то макет изобразить, но они не против если он будет отображаться другими правилами/способами, если отображение будет такое же.
если тебе, как верстальщику, не хочется под каждое устройство для каждого элемента писать новый размер шрифта, хотя это утвержденные макеты дизайна с утвержденными размерами, то можно просто уволиться и не морочить голову ни остальной команде, ни ПО, ни дизайнеру
Да, как верстальщику не хочется всё прописывать. Лучше использовать какой-то странный способ, который возможно не работает на некоторых браузерах(старые версии)
@@SerjioSlap Нужно стараться использовать решения, которые будут хорошо работать на всех браузерах. Нужно использовать новые современные решения как можно реже, по мере крайней необходимости, и то нужно смотреть, как будет выглядеть сайт без этого решения. Новые решения можно использовать на сайты, которые предназначены для аудитории с более новыми устройствами и браузерами
Как дизайнер хочу сказать, что наша задача должна быть в том числе в создании макетов, которые легко верстать. Я стараюсь в работе использовать универсальный размер шрифтов
Вообще дизайнеры должны учитывать возможности конструкционного решения, насколько легко и возможно ли реализовать проект. А то обычно дизайнеры по всяким курсам выучатся, сделают непонятно что, а потом думай как это сделать. Не обязательно сайты, даже столы видел на дизайне такие, что там нужно бетонную плиту с одной стороны заливать, чтобы всё это нормально балансировало(типа стоит стол только с левой стороны, а остальная столешница висит в воздухе). Так что очень хорошо, что вы об этом задумываетесь.
@@Grandfather__спасибо тем верстальщикам которые могут хоть что сделать, что не может сейчас конструктор. Шрифты им лень подбивать. Встречались разрабы, которые не могли сделать то, что я в web flow делал сам.
Круто, не знал о такой функции! Теперь буду использовать :) Еще как альтернативу можно использовать такой код: font-size: calc(1.2rem + 1.5vw) Но выглядит, конечно, не так наглядно :)
Если дизайнер скинул 3 варианта макета, надо придерживаться этих вариантов точно, использование viewportов и не кроссбраузерной технологии вряд ли хорошая идея
Ой. Я вообще не понимаю зачем вы велезли у меня в шортсах, я не программист.. видимо Ютуб решил что среди тонны гиков в комментариях надо закинуть одного обычного чтоб он подметил что вы просто великолепно выглядите ❤
Ну объективно фишка полезная, но медиазапросы не заменит) Если верстать что то хоть чуть более сложное чем учебный макет на 3 секции, без медиазапросов никуда
выносим размер шрифта в нативную переменную css, изменяем ее медиа запросами. Используем эту переменную в местах где это необходимо. clamp прикольная штука, но с моего опыта, четко заданные размеры гораздо лучше, так как очень редко используются тупо простыни текста, как правило они идут в комбинации с иконками, стрелочками, выпадашками и т.п. Их тоже надо адаптивить. И в определенный момент, ты понимаешь что дизайн начинает сыпаться, так как пропорции теряются. А вообще, всему свое место. Если это решает проблему и сокращает время разработки, то юзайте что душе угодно. В любом случае, знание еще одного свойста лишним не будет.
Все примеры с использованием clamp почему-то состоят только из 2 слов. Напишите нормальный заголовок из 75 символов что бы был скажем в 3 ряда и попробуйте и увидите что ничерта это не адаптив и все ровно придется править медиа запросом.
@@user-d6i9r Напиши заголовок из 76 символов (лимит яндекса, а для гугла 60 символов) включая пробелы и задай размер шрифта где 40 пикселей в 2 колоночном макете и посмотри сколько у тебя будет рядов. В некоторых случаях 3, в других 4 и даже 5.... речь про Х1 заголовок. А по поводу копирайтера не забывай еще о такой веши как СЕО! и скажем твое ключевое слово - стройматериалы... я посмотрю как ты напишешь привлекательный заголовок с ключевыми словами по короче....
Все круто, только делать так нельзя. Если вы знаете, что такое Reflow, Repaint, Composite и знаете из-за чего происходит перересовка страницы, то не будете использовать clamp и calc без крайней необходимости.
@@lds84 Ну когда речь идет о производительности и высоко нагруженных страницах, где часто(постоянно) происходят перерисовки, то при каждом ререндере будут занова пересчитываться эти величины, так как они не заданы постоянно, а Repaint - это одна из самых дорогостоящих операций, что влияет на время и скорость отображения важной информации. Например есть платформы, где данные отражаются в режиме реального времени(акции, котировки, мировые курсы валют, ставки, аукционы и другой фин. тех.) - там это очень важно.
@@lds84Просто данная Авторша пришла из мира CMS и Wordpress, где пишут маленькие интернет магазины за 500уе для предпринимателей и там можно не стараться и писать как угодно, все ровно большой разницы в этом случае не будет
@@Roc19961 Я лишь высказал свое мнение. Пишите, как Вам угодно. Если Вам нравится писать CMS за 3 копейки, где можно делать всякую дичь и не краснеть - это ваше решение. Я не говорю что такие функции нельзя использовать, просто не желательно или в крайнем случае. Я за свою практику calm() - ни разу не использовал, calc() - очень редко. Вот вы просто никогда не сталкивались например с биржей, когда у вас все значения постоянно обновляются, есть постоянно увеличивающиеся поля, вот там каждая мелочь важна.
@@Roc19961 значит не такие уж и большие проекты у Вас были, были бы большие, прилось бы вам забугорские жалобы обрабатывать. Как автор выше сказал, такие операции нужно использовать в крайних ситуациях, к тому же помнить о том, что после Вас могут работать другие разработчики и читать это гавно "модное" такая себе работа
Честно говоря я знаю и про клэмп и до него делал адаптивным размер шрифта через формулы, и всё работает Не уверен что будет недоволен дизайнер если в промежуточных будет не соответствие размеров, скорее наоборот ему не нужно делать промежутков и ничего не ломается. Но к сожалению кроме размера шрифта есть куча других вещей и от медиа запросов не уйти
Я, конечно, не программист, это не понимаю, но помню, раньше занимался графическим дизайном, там ещё был курс веб-дизайна и там преподавали языки программирования HTML было интересно. Правда, много что уже не помню, но посмотрел это короткое видео, что-то хотелось такое поделать.
Делаю через медиа потому что проще работать с одним макетом. Увеличил например футер себе десктопный, делаешь его, а потом идти смотреть какой размер шрифта на планшете, потом идти смотреть какой на мобиле. Проще и быстрее сверстать один, а адаптивы все в медиа прописывать. Идешь по рисунку сверху вниз и все. Никаких перескакиваний. Может так проще работать с кодом, конечно, я фиг знает, на мой взгляд прикольно, но очень ситуативно
А в вебе разве размеры не в поинтах измеряются? Я просто iOS dev. Point позволяет не привязываться к разрешению и описывает физический размер на экране с любым разрешением.
1. Есть clamp генераторы, очень полезная вещь, но читабельность стилей прямо на нуле, и никак не разберешся когда сколько будет 2. Clamp сильно нагружает устройство в начале. Поскольку cold start всегда требует много ресурсов, отрисовка элементов будет лишней, особенно для бюджетных устройств 3. Очень низкая поддержка. У недавних айфонов, проект будет рассыпаться на глазах. 4. Да очень ускоряет процесс верстки, но минусов очень много, а устронение все го этого обойдется всего лишь на переверстку
а не проще в css прописать, ну или соединить - html,body{font-size: 62.5%;}, это, примерно, 10 пикселей, и всё перевести в rem от этих 10 пикселей, он сам подстроится под все экраны
А толку. В большинстве случаев менять размер шрифта надо не везде, а там где текст слишком большой или не входит нормально в блок и происходит перенос строки. А так разницы между тем что прописать размер у каждого элемента в ремах или в пикселях уже не будет никакой выгоды ни в чем
Мини лекция супер. Но я в коменты спустился по другой причине. ОДИН РАЗ, ОДИН ЗАРАЗА РАЗ!!! Я при телефоне брякнул что надобы перечитать конспекты по питону так как подзабыл без практики как на нём писать. За этот день это уже 25 лекция по работе с питоном!! 😂 И после этого мне люди доказывают что Корпорации не собирают информацию о нас через микрофоны и динамики.
Поздравляю, если дизайнер скинул 3 варианта макета, то нужно использовать REM в размерах, что не ебать себе голову. Rem берёт за единицу размер указанный в font-size для тега Любой размер в любом формате будет применяться и автоматически пересчитывать все размеры на странице. К примеру, если указать font-size 2px то 3rem бкдет равен 6px. Для более гибкой адаптивности можно использовать font-size 5VW или 5VH, тогда rem в свою очередь будет брать размеры от ширины или высоты окна. Создаём класс :root{ Прописываем переменные --size:5vw; } Ниже подтягиваем размер шрифта html{ font-size: var(--size) } Всё готово, останется только в медиа запросах поменять содержимое переменной. Этот метод удобнее и работает лучше чем клемп или калк. Размеры линий не стоит указывать через rem, для линий старайтесь использовать нативные пиксели. Ps. Совет от дизайнера-верстальщика другим начинающим верстальщикам.
Во-первых, при хардкодинге размера шрифта любой смысл от REM пропадает. Во-вторых, хардкодинг размера шрифта противоречит принципам доступности интерфейса. В третьих, куда ты 5vw для размера шрифта использовать собрался?)) 5vw это 5% от ширины экрана - для FHD это будет 96px.
хех, подобную коменду использую для подстраивания размеров пакетов "clamp mss" иногда стоит запрет на сегментацию пакетов и эта команда избаляет от очень большого гемороя с высчитыванием оптимального MTU.
дизайнер офигеет когда увидит что размер шрифта не 30 пикселей на планшете
можно посчитать vw: 30px/768/100 где 768 это ширина планшета, например. тогда на планшете будет то, что в макете) и резина между значениями
Не правильно 30/768*100
@@deniseagle упс, скобки забыл. имел в виду 30/(768/100)
@@zerdox4 (30/768) * 100
vw = (30 / 768) * 100 = 3.90625vw
Что такое vw @@zerdox4
Представляю диалог:
"
- Дизайн макет подразумевает при разрешении 1024w размер шрифта 18px. Почему у тебя 19px?
- мне было лень написать один медиа и я решил выебнуться динамическим расчётом расчетом шрифта.
- красавчик! Теперь всегда пиши так, чтобы мы не понимали, какой будет размер шрифта при конкретном расширении.
"
Ага. Ой как сложно подключить гугл шрифты и из фигмы скопировать все настройки. Ой бедные прописывать лень им)
Пожалуйста, только мат замените литературно добрым тоном
@@Graderim Бездумно копировать никто не станет, иначе такую абракадабру даже видеть не захочеться, обычно все переписывается в своем стиле, со своими так сказать зависимостями, и как раз адаптивность явно будет плюсом ибо мы пишем резиновый дизайн, а не тупорный под определенный экран. Грубо говоря при плавной смене ширины ничего не должно никуда вылезти и меняться плавно и без огрехов.
@@mike.fireson наши разрабы делают, что бы точно так же как в фигме все было. Вплоть до названия переменных. Что бы единооьразие было. Но и дизайнеры у нас знакомы с базовой вёрсткой. У нас за границы ничего не вылетает, потмоу что мы просто рисуем десктоп и мобилку и масштабмоуем с сохранением пропорций под любой экран.
@@Graderim Бывают просто моменты, где одинаковое отображение можно изобразить разными правилами, к примеру более удобными для себя, либо теми, которые при смене ширины экрана будут автоматом пропорции отступов или соотношений сторон удерживать, конечно это все наверное индивидуально, но как почитал комменты, и сами дизайнеры не против подобного, им просто нужно как-то макет изобразить, но они не против если он будет отображаться другими правилами/способами, если отображение будет такое же.
если тебе, как верстальщику, не хочется под каждое устройство для каждого элемента писать новый размер шрифта, хотя это утвержденные макеты дизайна с утвержденными размерами, то можно просто уволиться и не морочить голову ни остальной команде, ни ПО, ни дизайнеру
Спасибо, сначала подумал, что не буду её использовать, но вот сегодня пригодилась!
Офигеть, не знал. Большое спасибо, в будущем буду использовать в своей вёрстке
Спасибо, большое, до этого только бутстрапом обходился, но теперь есть это
Неплохое решение. Для примерных дизайнов это идеально)
Да, как верстальщику не хочется всё прописывать. Лучше использовать какой-то странный способ, который возможно не работает на некоторых браузерах(старые версии)
Очень много современных решений не работает на старых браузерах. И что теперь делать?
@@SerjioSlaphardcode
@@SerjioSlap Нужно стараться использовать решения, которые будут хорошо работать на всех браузерах. Нужно использовать новые современные решения как можно реже, по мере крайней необходимости, и то нужно смотреть, как будет выглядеть сайт без этого решения. Новые решения можно использовать на сайты, которые предназначены для аудитории с более новыми устройствами и браузерами
@@TrofikBossIT так у clamp поддержка 94% в чем проблема
что за старые браузеры?@@SerjioSlap
Как дизайнер хочу сказать, что наша задача должна быть в том числе в создании макетов, которые легко верстать. Я стараюсь в работе использовать универсальный размер шрифтов
Вообще дизайнеры должны учитывать возможности конструкционного решения, насколько легко и возможно ли реализовать проект. А то обычно дизайнеры по всяким курсам выучатся, сделают непонятно что, а потом думай как это сделать. Не обязательно сайты, даже столы видел на дизайне такие, что там нужно бетонную плиту с одной стороны заливать, чтобы всё это нормально балансировало(типа стоит стол только с левой стороны, а остальная столешница висит в воздухе). Так что очень хорошо, что вы об этом задумываетесь.
Спасибо тем дизайнерам, которые делают такой дизайн, который можно нормально и легко сделать программно.
лучшая работа вмире
@@Grandfather__спасибо тем верстальщикам которые могут хоть что сделать, что не может сейчас конструктор. Шрифты им лень подбивать. Встречались разрабы, которые не могли сделать то, что я в web flow делал сам.
90 процентов дизайнеров в кавычках даже не осознают база, и что такое адаптивная верстка, если бы они это осознавали то мир бы был чуточку лучше
Полезности!) Спасибули
Воу, сколько верстаю, а этого не знал. Спасибо, буду использовать
Круто, не знал о такой функции! Теперь буду использовать :)
Еще как альтернативу можно использовать такой код: font-size: calc(1.2rem + 1.5vw)
Но выглядит, конечно, не так наглядно :)
Возможно, такой вариант ещё пригодится, для поддержки более старых браузеров
Спасибо больше, давно уже искал эту функцию)
Очень классно. Жду еще больше такой рубрики ❤❤❤
Умная ты наш
Оуу щит , спс
Молоток девченка🎉
Не знал. Надо попробовать. Спасибо!
Супер пример спасибо большое👍
Если дизайнер скинул 3 варианта макета, надо придерживаться этих вариантов точно, использование viewportов и не кроссбраузерной технологии вряд ли хорошая идея
Дизайнер не лидер проекта, можно насувать ему за щеку чтоб шел переделывал, это низшая часть цепочки разработки, чаще всего они даже не в штате
Спасибо не знал
Использовал calc для адаптива.
Прикольно. Буду пользоваться. Спасибо.
Давно не занимаюсь, но, подписался 😅
Спасибо вам огромное! Я не знал
Вот это топ! 🤌 Щас буду переделывать свои рисеты
em у рут элемента: я для тебя шутка какая-то? 🗿
😂😂😂👍
Ой. Я вообще не понимаю зачем вы велезли у меня в шортсах, я не программист.. видимо Ютуб решил что среди тонны гиков в комментариях надо закинуть одного обычного чтоб он подметил что вы просто великолепно выглядите ❤
класс❤😊ты супер Анюта
Ну объективно фишка полезная, но медиазапросы не заменит) Если верстать что то хоть чуть более сложное чем учебный макет на 3 секции, без медиазапросов никуда
То, что нужно, спасибо ❤
выносим размер шрифта в нативную переменную css, изменяем ее медиа запросами. Используем эту переменную в местах где это необходимо. clamp прикольная штука, но с моего опыта, четко заданные размеры гораздо лучше, так как очень редко используются тупо простыни текста, как правило они идут в комбинации с иконками, стрелочками, выпадашками и т.п. Их тоже надо адаптивить. И в определенный момент, ты понимаешь что дизайн начинает сыпаться, так как пропорции теряются. А вообще, всему свое место. Если это решает проблему и сокращает время разработки, то юзайте что душе угодно. В любом случае, знание еще одного свойста лишним не будет.
Спасибо не знал, использовал только ии для всех этих дел
Спасибо, не знал !
Ваще огонь
Спасибо.Полезно)
Класс, спасибо. Не знала!!! 🎉
Огнище 🔥🔥🔥
Очень интересно 😊
Не, не знал. Классная фишка.
Все примеры с использованием clamp почему-то состоят только из 2 слов. Напишите нормальный заголовок из 75 символов что бы был скажем в 3 ряда и попробуйте и увидите что ничерта это не адаптив и все ровно придется править медиа запросом.
Зачем заголовок в 3 ряда? 😮
@@shairongodly3815 Потому что UX
Если у вас заголовок в 3 ряда, то вам нужно менять копирайтера
@@user-d6i9r Напиши заголовок из 76 символов (лимит яндекса, а для гугла 60 символов) включая пробелы и задай размер шрифта где 40 пикселей в 2 колоночном макете и посмотри сколько у тебя будет рядов. В некоторых случаях 3, в других 4 и даже 5.... речь про Х1 заголовок. А по поводу копирайтера не забывай еще о такой веши как СЕО! и скажем твое ключевое слово - стройматериалы... я посмотрю как ты напишешь привлекательный заголовок с ключевыми словами по короче....
Спасибо не знал что есть такая полезная штука
Не знал. Надо будет запомнить)
Спасибо, Анна! Не знала.
ооо, Спасибо большое
Просто класс👍
СПАСИБО!!
Хорошая функция.
Вы прелесть.
Все круто, только делать так нельзя. Если вы знаете, что такое Reflow, Repaint, Composite и знаете из-за чего происходит перересовка страницы, то не будете использовать clamp и calc без крайней необходимости.
А в чём проблема? Сколько раз пользователь изменяет ширину страницы уже после захода на неё? Ноль или 1-2 раза.
@@lds84 Ну когда речь идет о производительности и высоко нагруженных страницах, где часто(постоянно) происходят перерисовки, то при каждом ререндере будут занова пересчитываться эти величины, так как они не заданы постоянно, а Repaint - это одна из самых дорогостоящих операций, что влияет на время и скорость отображения важной информации. Например есть платформы, где данные отражаются в режиме реального времени(акции, котировки, мировые курсы валют, ставки, аукционы и другой фин. тех.) - там это очень важно.
@@lds84Просто данная Авторша пришла из мира CMS и Wordpress, где пишут маленькие интернет магазины за 500уе для предпринимателей и там можно не стараться и писать как угодно, все ровно большой разницы в этом случае не будет
@@Roc19961 Я лишь высказал свое мнение. Пишите, как Вам угодно. Если Вам нравится писать CMS за 3 копейки, где можно делать всякую дичь и не краснеть - это ваше решение. Я не говорю что такие функции нельзя использовать, просто не желательно или в крайнем случае. Я за свою практику calm() - ни разу не использовал, calc() - очень редко.
Вот вы просто никогда не сталкивались например с биржей, когда у вас все значения постоянно обновляются, есть постоянно увеличивающиеся поля, вот там каждая мелочь важна.
@@Roc19961 значит не такие уж и большие проекты у Вас были, были бы большие, прилось бы вам забугорские жалобы обрабатывать.
Как автор выше сказал, такие операции нужно использовать в крайних ситуациях, к тому же помнить о том, что после Вас могут работать другие разработчики и читать это гавно "модное" такая себе работа
Ааа,я вспомнил кого ты мне напоминаешь-сестра Шелдона в детстве (сериал такой)😅
😮 Открытие вселенной
Не знал. Я линейную функцию в calc() для такого пишу. Работает безотказно.
Не знал. Лайк, в избранное.
Меня учили использовать (max-width:1200px) and (min-width:300px)
Нет не знал, спасибо!
Честно говоря я знаю и про клэмп и до него делал адаптивным размер шрифта через формулы, и всё работает
Не уверен что будет недоволен дизайнер если в промежуточных будет не соответствие размеров, скорее наоборот ему не нужно делать промежутков и ничего не ломается.
Но к сожалению кроме размера шрифта есть куча других вещей и от медиа запросов не уйти
А про брейк поинты никто не слышал 👍
Процентами не удобнее пользоваться?
Спасибо❤
а правда что frontend и ui/ux станут не нужны на горизонте трёх лет?
Интересно, а почему у вас размер шрифта в медиа запросах в пикселях, а не скажем в рэмах(rem), в рэмах же удобнее, не?:)))
Это лишь пример. Для rem будет работать аналогично.
@@annblok_webdev Для Рем такая бесполезная практика не нужна...
Может быть автор привела не совсем удачный пример, но я все равно поставил лайк, т.к. не знал о такой возможности и в будущем может пригодиться
Я думал то что ты скажешь "Искуственный интелект"
Класс и подписка 👍
База адаптивной верстке
Пользуюсь calc, про это не знал
Я, конечно, не программист, это не понимаю, но помню, раньше занимался графическим дизайном, там ещё был курс веб-дизайна и там преподавали языки программирования HTML было интересно. Правда, много что уже не помню, но посмотрел это короткое видео, что-то хотелось такое поделать.
Делаю через медиа потому что проще работать с одним макетом. Увеличил например футер себе десктопный, делаешь его, а потом идти смотреть какой размер шрифта на планшете, потом идти смотреть какой на мобиле. Проще и быстрее сверстать один, а адаптивы все в медиа прописывать. Идешь по рисунку сверху вниз и все. Никаких перескакиваний. Может так проще работать с кодом, конечно, я фиг знает, на мой взгляд прикольно, но очень ситуативно
ну да ну да, адаптив в пикселях это прям топчик
А в вебе разве размеры не в поинтах измеряются? Я просто iOS dev. Point позволяет не привязываться к разрешению и описывает физический размер на экране с любым разрешением.
И в конечном варианте мы не будем знать какой размер шрифта + у нас будут лишние функции
И как он работает в разных браузерах и на разных устройствах?
То чувство когда хотелки никого неволнуют а тз составлял старый пень изучавший фортран :)
Эх, где эти дизайнеры которые делают макет под все устройства. Жаль что у меня нет(
CSS
-ГЕЙМЕРЫ!: КОНТР СТРАЙК СЁРС
Ничесе 😏 это че то новое вышло что ли?
Не сказала бы, что это что-то новое, поддержка уже на уровне 91%
1. Есть clamp генераторы, очень полезная вещь, но читабельность стилей прямо на нуле, и никак не разберешся когда сколько будет
2. Clamp сильно нагружает устройство в начале. Поскольку cold start всегда требует много ресурсов, отрисовка элементов будет лишней, особенно для бюджетных устройств
3. Очень низкая поддержка. У недавних айфонов, проект будет рассыпаться на глазах.
4. Да очень ускоряет процесс верстки, но минусов очень много, а устронение все го этого обойдется всего лишь на переверстку
Я не верстальщик, но было интересно
Вот спасибо! Эти медиа никогда не любил😂
Хм а добавть scss и использовать миксины не ?)
а не проще в css прописать, ну или соединить - html,body{font-size: 62.5%;}, это, примерно, 10 пикселей, и всё перевести в rem от этих 10 пикселей, он сам подстроится под все экраны
Поподробнее можно, не очень понял
Тоже подумал про REMы и зачем такое советуют вооьще)
А толку. В большинстве случаев менять размер шрифта надо не везде, а там где текст слишком большой или не входит нормально в блок и происходит перенос строки. А так разницы между тем что прописать размер у каждого элемента в ремах или в пикселях уже не будет никакой выгоды ни в чем
Можно ли указывать размеры не в пикселях а в процентах?
Мини лекция супер. Но я в коменты спустился по другой причине. ОДИН РАЗ, ОДИН ЗАРАЗА РАЗ!!! Я при телефоне брякнул что надобы перечитать конспекты по питону так как подзабыл без практики как на нём писать. За этот день это уже 25 лекция по работе с питоном!! 😂 И после этого мне люди доказывают что Корпорации не собирают информацию о нас через микрофоны и динамики.
Или можно юзать ксс переменные для свойства font и заранее задать их адаптацию
ну или скинуть gpt все 3 картинки и он тебе просто сверстает макет :) Не благодарите! :)
И от куда эти новые css свойства берутся?
Ну это не сработает, если у вас не все компоненты резиновые, если у вас pixel perfect - планшетная версия не пройдет проверку.
3 года назад начал юзать. Но тогда поддержка была не очень
Круто)
Поздравляю, если дизайнер скинул 3 варианта макета, то нужно использовать REM в размерах, что не ебать себе голову.
Rem берёт за единицу размер указанный в font-size для тега
Любой размер в любом формате будет применяться и автоматически пересчитывать все размеры на странице.
К примеру, если указать font-size 2px то 3rem бкдет равен 6px.
Для более гибкой адаптивности можно использовать font-size 5VW или 5VH, тогда rem в свою очередь будет брать размеры от ширины или высоты окна.
Создаём класс :root{
Прописываем переменные
--size:5vw;
}
Ниже подтягиваем размер шрифта
html{
font-size: var(--size)
}
Всё готово, останется только в медиа запросах поменять содержимое переменной.
Этот метод удобнее и работает лучше чем клемп или калк.
Размеры линий не стоит указывать через rem, для линий старайтесь использовать нативные пиксели.
Ps. Совет от дизайнера-верстальщика другим начинающим верстальщикам.
Умников никто не любит.
Запомни это!
Во-первых, при хардкодинге размера шрифта любой смысл от REM пропадает.
Во-вторых, хардкодинг размера шрифта противоречит принципам доступности интерфейса.
В третьих, куда ты 5vw для размера шрифта использовать собрался?)) 5vw это 5% от ширины экрана - для FHD это будет 96px.
Это что, первый нормальный ролик который я в шортс встречаю? 99% подобных рассказывают как использовать совсем уж базовые вещи
Спасибо!
Эта штука полезная но не всегда корректно работает
Не знал. Круто
смотрим поддержку браузеров clamp() в Can I use и понимаем что на данный момент использовать его не очень хорошо
91%
Знал об этом. К сожалению не на все работает😢. А почему 5vw, а не допустим 3 , или 4?
Да, слышал css неплохая игра, интересно много ли людей в нее играют?
Класс
А почему нельзя просто использовать относительные единицы вместо пикселей?
хех, подобную коменду использую для подстраивания размеров пакетов "clamp mss" иногда стоит запрет на сегментацию пакетов и эта команда избаляет от очень большого гемороя с высчитыванием оптимального MTU.
что в данном примере будет означать 5vw
Элси дизайнер скинул 3 макета а не 1 (дай бог эму здоровя)