Масштабирование размера шрифта по соотношению сторон - PullRequest
Новая
       25

Масштабирование размера шрифта по соотношению сторон

0 голосов
/ 26 августа 2018

На прошлой неделе один из моих коллег сказал мне, что одна из наших страниц выглядела сломанной для них. Оказывается, у них странное разрешение экрана: 1279 x 635.

Хотя мне комфортно с концепцией адаптивного дизайна, основанного на ширине, я бы на самом деле не углублялся в основанные на высоте ранее и полагал, что добавление медиазапросов по ширине и высоте по отдельности может привести к неожиданным пересечениям вниз по линии.

Я понял, что проблему можно решить, уменьшив размер шрифта, и что экран этого парня имеет соотношение сторон чуть более 2: 1, поэтому я решил, что масштабирование по соотношению сторон будет хорошей идеей.

Я нашел статью Тима Брауна об использовании CSS-блокировок для достижения аналогичного эффекта с высотой строки, что, в свою очередь, связало меня со статьей Майка Ритмюллера о достижении того же эффекта с помощью размер шрифта. Однако формуле (она хорошо прокомментирована в его CodePen , которая также использует переменные - это было больше похоже на то, чего я пытался достичь) требуется минимальная и максимальная ширина для работы между ними.

Так что моим следующим шагом было получить минимальную и максимальную ширину в зависимости от соотношения сторон. Поскольку я знаю, что хочу начать масштабирование в 18/10 и остановить его, когда оно достигнет 2: 1 (чтобы экран моего коллеги попал в категорию «наименьший размер шрифта»), это просто вопрос вычисления этой ширины на текущем экране. размер: 

--aspect-width-max: calc( 2 * 100vh );
--aspect-width-min: calc( 1.8 * 100vh );

Однако это нарушило формулу. Я подозреваю, что это происходит из-за того, что хвостовой части формулы требуются значения без единиц измерения для работы с делителем, а вышеприведенные функции calc() выделяют значения с vh единицами, хотя я не могу найти много о том, как calc() работает при использовании смешанных единиц, и мне нужно будет использовать vh, чтобы получить ширину, основанную на соотношении сторон.

Мой полный (неработающий) код в настоящее время: 

:root{
    --font-size-max:    24;
    --font-size-min:    16;
    --aspect-width-max: calc( 2 * 100vh );
    --aspect-width-min: calc( 1.8 * 100vh );
}
html{
    font-size: calc( var(--font-size-max) * 1px );
    height: 100%;
}
@media (min-aspect-ratio: 18/10){
    html{
        font-size: calc( 16px + ( var(--font-size-max) - var(--font-size-min) ) * ( ( 100vw - (var(--aspect-width-min) * 1px) ) / (var(--aspect-width-max) - var(--aspect-width-min)) ) );
    }
}
@media (max-width: 767px), (min-aspect-ratio: 2/1){
    html{
        font-size: calc( var(--font-size-min) * 1px );
    }
}

Есть идеи?

...