Comments 9
Вместо своей рекламы, лучше бы хоть один CodePen привели с демонстрацией работы.
Про поддержку браузерами ничего не было сказано.
Поэтому обращу внимание на то, что в современных браузерах (к сожалению, пока что без Safari) уже поддерживается функция «clamp()» и эта задача в некоторой степени решается гораздо проще.
У MDN нет рекламных видео на YouTube, поэтому ограничусь ссылкой на страницу справочника
Ну и пример с демонстрацией работы:
Про поддержку браузерами ничего не было сказано.
Поэтому обращу внимание на то, что в современных браузерах (к сожалению, пока что без Safari) уже поддерживается функция «clamp()» и эта задача в некоторой степени решается гораздо проще.
У MDN нет рекламных видео на YouTube, поэтому ограничусь ссылкой на страницу справочника
Ну и пример с демонстрацией работы:
-2
Этот вариант, мягко говоря, не эквивалентен описанному в статье.
+1
Я и не говорил, что это замена.
Упомянул новую интересную функцию
Упомянул новую интересную функцию
0
Функция интересная, но:
1. В контексте статьи мало что меняет, поскольку она решает лишь побочную подзадачу (ограничение диапазона), а не основную (управляемое масштабирование).
2. Менее удобна, чем медиа-запрос, потому что из этого выражения совсем не очевидно, при каком размере окна сработает ограничение. Более короткий код не всегда более удобный.
3. Имеет пока неприемлемо слабую поддержку.
1. В контексте статьи мало что меняет, поскольку она решает лишь побочную подзадачу (ограничение диапазона), а не основную (управляемое масштабирование).
2. Менее удобна, чем медиа-запрос, потому что из этого выражения совсем не очевидно, при каком размере окна сработает ограничение. Более короткий код не всегда более удобный.
3. Имеет пока неприемлемо слабую поддержку.
0
Перечитал комментарий.
Да, согласен.
Написал так, будто замена.
Да, согласен.
Написал так, будто замена.
0
Можно еще примерно так: font-size: min(12px, max(10vw, 24px))
0
Вариант, изложенный в видео, неправильный.
Несоответствие в нижней границе у вас произошло потому, что у вас неверная формула. Но вместо того, чтобы аккуратно разобраться в причинах и исправить, вы подперли её костылем с магическим коэффициентом. Костыль этот дает бесшовность (не совсем точную, но почти), но ломает линейность.
Использовать это нельзя. В интернете без труда можно найти корректные реализации.
Несоответствие в нижней границе у вас произошло потому, что у вас неверная формула. Но вместо того, чтобы аккуратно разобраться в причинах и исправить, вы подперли её костылем с магическим коэффициентом. Костыль этот дает бесшовность (не совсем точную, но почти), но ломает линейность.
Использовать это нельзя. В интернете без труда можно найти корректные реализации.
0
SCSS:
Пример: font-size: w(16, 320); где 16 это 16px
@function w($width, $window) {
@return ($width * 100vw) / $window;
}
Пример: font-size: w(16, 320); где 16 это 16px
0
Можно избежать костыль:
простым способом:
Мы тут сразу закрываем проблему с не соответствием шрифта при размере экрана в 320px.
Остается вопрос как ограничивать размер шрифта при увеличения экрана не «костылем».
@media (min-width: 767px){
h1 {
font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
}
}
простым способом:
{
font-size: calc(24px + 16 * ((100vw - 320px) / (1280 - 320)));
}
Мы тут сразу закрываем проблему с не соответствием шрифта при размере экрана в 320px.
Остается вопрос как ограничивать размер шрифта при увеличения экрана не «костылем».
0
Sign up to leave a comment.
Articles
Change theme settings
Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями