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