Масштабирование шрифтов по ширине контейнера

Мне тяжело ловить голову вокруг масштабирования шрифтов.

В настоящее время у меня есть этот сайт с размером тела 100%. 100% чего? Это, похоже, вычисляется в 16px.

У меня создалось впечатление, что 100% каким-то образом ссылаются на размер windows браузера, но, видимо, не потому, что всегда 16px, изменилось ли окно до ширины мобильного телефона или полномасштабного широкоэкранного рабочего стола.

Как я могу сделать текст на шкале моего сайта относительно его контейнера? Я попытался использовать em но это тоже не масштабируется.

Мое рассуждение состоит в том, что такие вещи, как мое меню, становятся смятыми при изменении размера, поэтому мне нужно уменьшить font-size px .menuItem среди других элементов по отношению к ширине контейнера. (Например, в меню на большом рабочем столе, 22px отлично работает. Переходите на ширину планшета, а 16px более подходит.)

Я знаю, что могу добавить контрольные точки, но я действительно хочу, чтобы текст масштабировался как WELL, так как у него были дополнительные точки останова, иначе я получаю сотни точек останова для каждого уменьшения ширины 100 пикселей для управления текстом.

EDIT: если контейнер не является телом CSS Tricks охватывает все ваши варианты здесь: https://css-tricks.com/fitting-text-to-a-container/

Если контейнер является телом, то, что вы ищете, имеет длину в процентах по видовому экрану :

Промежуточные длины в окне просмотра относятся к размеру исходного содержащего блока . Когда изменяется высота или ширина исходного содержащего блока, они соответственно масштабируются. Однако, когда значение переполнения корневого элемента авто, любые полосы прокрутки, как предполагается, не существуют.

Значения:

  • vw (% ширины windows просмотра)
  • vh (% высоты просмотра)
  • vi (1% от размера windows просмотра в направлении внутренней оси корневого элемента)
  • vb (1% от размера windows просмотра в направлении оси блока корневого элемента)
  • vmin (меньше vw или vh )
  • vmax (больше или vw или vh )

1 v * равно 1% исходного блока.

используя его выглядит так:

 p { font-size: 4vw; } 

Как вы можете видеть, при увеличении ширины windows просмотра размер шрифта также не требует использования медиа-запросов.

Эти значения представляют собой блок калибровки, точно так же, как px или em , поэтому их можно использовать для измерения других элементов, таких как ширина, маржа или отступы.

Поддержка браузера довольно хороша, но вам, скорее всего, понадобится резерв, например:

 p { font-size: 16px; font-size: 4vw; } 

Просмотрите статистику поддержки: http://caniuse.com/#feat=viewport-units .

Кроме того, ознакомьтесь с CSS-Tricks для более широкого обзора: http://css-tricks.com/viewport-sized-typography/

Вот хорошая статья о настройке минимальных / максимальных размеров и меньшем контроле над размерами: http://madebymike.com.au/writing/precise-control-responsive-typography/

И вот статья о настройке вашего размера с помощью calc (), чтобы текст заполнил область просмотра: http://codepen.io/CrocoDillon/pen/fBJxu

Кроме того, просмотрите эту статью, которая использует технику, получившую название «расплавленный ведущий», чтобы отрегулировать высоту линии. https://css-tricks.com/molten-leading-css/

Но что, если контейнер не является окном просмотра (тело)?

Этот вопрос задается в комментарии Алекса по принятому ответу.

Этот факт не означает, что vw не может использоваться в некоторой степени для размера для этого контейнера. Теперь, чтобы увидеть какие-либо вариации, нужно учитывать, что контейнер каким-то образом является гибким по размеру. Независимо от того, через прямую процентную width или через 100% минус маржи. Дело становится «спорными» , если контейнер всегда устанавливается, скажем, 200px в ширину – то просто установить font-size , который работает на этой ширины.

Пример 1

Однако при использовании контейнера с гибкой шириной необходимо убедиться, что в какой-то мере контейнер по- прежнему находится на расстоянии от области просмотра . Как таковой, речь идет о настройке настройки vw основанной на этой разнице в процентах в окне просмотра, что означает учет размера родительских оберток. Возьмем следующий пример :

 div { width: 50%; border: 1px solid black; margin: 20px; font-size: 16px; /* 100 = viewport width, as 1vw = 1/100th of that So if the container is 50% of viewport (as here) then factor that into how you want it to size. Let's say you like 5vw if it were the whole width, then for this container, size it at 2.5vw (5 * .5 [ie 50%]) */ font-size: 2.5vw; } 

Предполагая, что div является дочерним элементом body , это 50% этой 100% ширины, которая является размером видового экрана в этом базовом случае. В принципе, вы хотите установить vw который будет хорошо выглядеть для вас. Как вы можете видеть в моем комментарии в приведенном выше CSS, вы можете «продумывать» это математически по отношению к полному размеру видового экрана, но вам не нужно это делать. Текст будет «гибким» с контейнером, потому что контейнер сгибается с изменением размера видового экрана. ОБНОВЛЕНИЕ: вот пример двух контейнеров различного размера .

Пример 2.

Вы можете помочь обеспечить размер виджета, заставляя вычисление основываться на этом. Рассмотрим этот пример :

 html {width: 100%;} /* force html to be viewport width */ body {width: 150%; } /* overflow the body */ div { width: 50%; border: 1px solid black; margin: 20px; font-size: 16px; /* 100 = viewport width, as 1vw = 1/100th of that Here, the body is 150% of viewport, but the container is 50% of viewport, so both parents factor into how you want it to size. Let's say you like 5vw if it were the whole width, then for this container, size it at 3.75vw (5 * 1.5 [ie 150%]) * .5 [ie 50%] */ font-size: 3.75vw; } 

Калибровка по-прежнему основана на видовом экране, но по существу создана исходя из размера контейнера.

Если динамическое изменение контейнера динамически …

Если размер элемента контейнера в конечном итоге динамически изменил его процентное соотношение либо через точки перерыва @media либо через javascript, то какой бы базовая «цель» не нуждалась в пересчете, чтобы поддерживать одинаковое «отношение» к размеру текста.

Возьмите пример № 1 выше. Если div был переключен на 25% ширины на @media или javascript, то в то же время font-size должен был бы корректироваться либо в медиа-запросе, либо в javascript для нового расчета 5vw * .25 = 1.25 . Это приведет к тому, что размер текста будет иметь тот же размер, что и ширина « 50% исходного 50% контейнера была уменьшена наполовину от размера видового экрана, но теперь была уменьшена из-за изменения собственного процентного расчета.

Вызов

С использованием используемой функции CSS3 calc() было бы сложно настроить динамически, так как эта функция в настоящее время не работает для целей font-size . Таким образом, вы не можете выполнить чистую настройку CSS3, если ваша ширина изменяется на calc() . Конечно, незначительная корректировка ширины для полей может быть недостаточной, чтобы гарантировать изменение font-size , поэтому это может и не иметь значения.

То, что я делаю в одном из моих проектов, – это «смесь» между vw и vh, чтобы настроить размер шрифта на мои нужды, например:

 font-size: calc(3vw + 3vh); 

Я знаю, что это не отвечает на вопрос оп, но, возможно, это может быть решением для всех остальных.

Для этой проблемы существует большая философия. Проще всего сделать это, чтобы дать определенный размер шрифта телу (i recommand 10), а затем весь другой элемент будет иметь свой шрифт в em или rem. Я дам вам и пример, чтобы понять эти единицы. Em всегда относится к своему родителю

 body{font-size:10px;} .menu{font-size:2em;} /* that means 2*10px = 20px */ .menu li{font-size:1.5em;} /* that means 1.5*20px = 30px */ 

Рем всегда относительно тела

 body{font-size:10px;} .menu{font-size:2rem;} /* that means 2*10px = 20px */ .menu li{font-size:1.5rem;} /* that means 1.5*10px = 15px */ 

И чем вы могли бы создать скрипт, который изменил бы размер шрифта относительно ширины вашего контейнера. Но это не то, что я бы рекомендовал. Потому что в контейнере ширины 900 пикселей, например, у вас будет элемент p с размером шрифта 12px, скажем так. И на вашей идее, которая станет на контейнере шириной 300 пикселей с размером шрифта 4px. Должен быть нижний предел. Другие решения были бы с медиа-запросами, так что вы могли бы установить шрифт для разных ширины.

Но решения, которые я бы рекомендовал, – это использовать библиотеку javascript, которая поможет вам в этом. И fittext.js, который я нашел до сих пор.

Решение с SVG:

 
Text

https://jsfiddle.net/qc8ht5eb/

Обновлено, потому что я получил голос.

Вот функция:

 document.body.setScaledFont = function(f) { var s = this.offsetWidth, fs = s * f; this.style.fontSize = fs + '%'; return this }; 

Затем преобразуйте все размеры дочерних элементов вашего документа в em или%.

Затем добавьте что-то вроде этого в свой код, чтобы установить размер базового шрифта.

 document.body.setScaledFont(0.35); window.onresize = function() { document.body.setScaledFont(0.35); } 

http://jsfiddle.net/0tpvccjt/

Это может быть не очень практично, но если вы хотите, чтобы шрифт был прямой функцией родителя, без какого-либо JS, который прослушивает / циклы (интервал) для чтения размера div / страницы, есть способ сделать это. Iframes. Все, что находится внутри iframe, будет рассматривать размер iframe как размер windows просмотра. Таким образом, трюк состоит в том, чтобы просто создать iframe, ширина которого является максимальной шириной, которую вы хотите, чтобы ваш текст был, и высота которого равна максимальной высоте * пропорции конкретного текста.

Отменив ограничение, которое единицы просмотра не могут также поступать вдоль боковых родительских блоков для текста (как и в случае, когда размер% ведет себя как все остальные), блоки видового экрана предоставляют очень мощный инструмент: возможность получить минимальное / максимальное измерение , Вы не можете сделать это где-нибудь еще – вы не можете сказать … сделайте высоту этого div, чтобы ширина родительского * что-то.

Считается, что трюк заключается в использовании vmin и установке размера iframe, так что общая высота [fraction] * является хорошим размером шрифта, когда высота является предельным размером, а [фракция] * общей шириной, когда ширина равна предельный размер. Вот почему heigh должен быть продуктом ширины и пропорции.

для моего конкретного примера у вас есть

 .main iframe{ position: absolute; top: 50%; left: 50%; width: 100%; height: calc(3.5 * 100%); background: rgba(0,0,0,0); border-style: none; transform: translate3d(-50%,-50%,0); } 

Небольшое раздражение этим методом заключается в том, что вам нужно вручную установить CSS iframe. Если вы прикрепляете весь файл CSS, это потребует большой пропускной способности для многих текстовых областей. Итак, что я делаю, присоединяю правило, которое хочу получить непосредственно от моего CSS.

 var rule = document.styleSheets[1].rules[4]; var iDoc = document.querySelector('iframe').contentDocument; iDoc.styleSheets[0].insertRule(rule.cssText); 

Вы можете написать небольшую функцию, которая получает правило CSS / все правила CSS, которые влияют на область текста.

Я не могу придумать другой способ сделать это, не слушая JS. Реальное решение было бы для браузеров предоставить способ масштабирования текста как функции родительского контейнера И также предоставить те же функции типа vmin / vmax.

JS скрипт: https://jsfiddle.net/0jr7rrgm/3/ (нажмите один раз, чтобы заблокировать красный квадрат мыши, нажмите еще раз, чтобы выпустить)

Большая часть JS в скрипке – это только моя пользовательская функция перетаскивания по клику

Решение Pure-CSS с calc() , CSS и математикой

Это не то, что ОП задает, но может сделать чей-то день. Этот ответ не легонько прост и нуждается в некоторых исследованиях в конце разработки.

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

Когда я это обработал, мне пришлось получить полноценный заголовок с широким охватом страницы, а некоторые дополнения были добавлены в DOM. Я буду использовать свои ценности здесь, замените их своими.

К математике

Тебе понадобится:

  • красиво отрегулированное соотношение в некоторых видовых экранах, я использовал 320 пикселей, таким образом, я получил 24px высокий и 224px широкий, поэтому соотношение составляет 9.333 … или 28/3
  • ширина контейнера, у меня была padding: 3em и полная ширина, так что это дошло до 100wv - 2 * 3em

X – ширина контейнера, поэтому замените его собственным выражением или отредактируйте значение, чтобы получить полнотекстовый текст. R – отношение, которое у вас будет. Вы можете получить его, отредактировав значения в каком-либо окне просмотра, проверив ширину и высоту элемента и заменив их собственными значениями. Кроме того, это width / heigth 😉

 x = 100vw - 2 * 3em = 100vw - 6em r = 224px/24px = 9.333... = 28 / 3 y = x / r = (100vw - 6em) / (28 / 3) = (100vw - 6em) * 3 / 28 = (300vw - 18em) / 28 = (75vw - 4.5rem) / 7 

И взрыв! Это сработало! я написал

 font-size: calc((75vw - 4.5rem) / 7) 

в мой заголовок, и он прекрасно подойдёт в каждом окне просмотра.

Но как это работает?

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

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

Вывод

Интересно, почему никто не понял этого, и некоторые люди даже говорят, что это невозможно было бы переделать с помощью CSS. Я не люблю использовать Javascript в настройке элементов, поэтому я не принимаю ответы JS или даже jQuery, не копая больше. В целом, хорошо, что это выяснилось, и это один шаг к реализации чистых CSS в дизайне сайтов.

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

Изменить : следует также отметить, что у нас есть злые полосы прокрутки в некоторых браузерах. Например, при использовании Firefox я заметил, что 100vw означает полную ширину видового экрана, проходящую под полосой прокрутки (где контент не может расширяться!), Поэтому текст полной ширины должен быть тщательно окрашен и желательно проходить тестирование со многими браузерами и устройствами.

Существует способ сделать это БЕЗ javascript!

Вы можете использовать встроенный svg. Вы можете использовать css на svg, если он встроен. Вы должны помнить, что использование этого метода означает, что ваш svg ответит на его размер контейнера.

Попробуйте использовать следующее решение …

HTML

 
SAVE $500

CSS

 div { width: 50%; /* set your container width */ height: 50%; /* Set your container height */ } svg { width: 100%; height: auto; } text { transform: translate(40px, 202px); font-size: 62px; fill: #000; } 

Пример: https://jsfiddle.net/k8L4xLLa/32/

Хотите что-нибудь более кричащее?

SVG также позволяют вам делать classные вещи с фигурами и мусором. Проверьте этот замечательный вариант использования для масштабируемого текста …

https://jsfiddle.net/k8L4xLLa/14/

Используя vw , em & co. работает точно, но imo всегда нуждается в прикосновении человека для тонкой настройки.

Вот сценарий, который я только что написал на основе ответа @ tnt-rox, который пытается автоматизировать контакт этого человека:

 $('#controller').click(function(){ $('h2').each(function(){ var $el = $(this), max = $el.get(0), el = null ; max = max ? max.offsetWidth : 320 ; $el.css({ 'font-size': '1em', 'display': 'inline', }); el = $el.get(0); el.get_float = function(){ var fs = 0 ; if (this.style && this.style.fontSize) { fs = parseFloat(this.style.fontSize.replace( /([\d\.]+)em/g, '$1' )); } return fs; }; el.bigger = function(){ this.style.fontSize = (this.get_float() +0.1) +'em'; }; while ( el.offsetWidth < max ) { el.bigger(); } // finishing touch. $el.css({ 'font-size': ((el.get_float() -0.1) +'em'), 'line-height': 'normal', 'display': '', }); }); // end of ( each ) }); // end of ( font scaling test ) 
 div { width: 50%; background-color: tomato; font-family: 'Arial'; } h2 { white-space: nowrap; } h2:nth-child(2) { font-style: italic; } 
   

Lorem ipsum dolor

Test String

Sweet Concatenation

Font Scaling

100% относительно базового размера шрифта, который, если вы его не установили, будет пользовательским агентом браузера по умолчанию.

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

Внутри CSS попробуйте добавить это внизу, изменяя ширину 320 пикселей, где бы ни начинался ваш дизайн:

  @media only screen and (max-width: 320px) { body { font-size: 1em; } } 

Затем укажите размер шрифта в «px» или «em», как вы пожелаете.

Вы пробовали http://simplefocus.com/flowtype/ ?

Это то, что я использую для своих сайтов и отлично работаю. Надеюсь, поможет.

вы ищете что-то вроде этого? =>
http://jsfiddle.net/sijav/dGsC9/4/
http://fiddle.jshell.net/sijav/dGsC9/4/show/
Я использовал flowtype, и он отлично работает (однако это js, а не чистое решение css)

 $('body').flowtype({ minFont : 10, maxFont : 40, minimum : 500, maximum : 1200, fontRatio : 70 }); 

Мое собственное решение, основанное на jQuery, работает, постепенно увеличивая размер шрифта, пока контейнер не получит большое увеличение высоты (что означает, что он получил разрыв строки). Это довольно просто, но работает достаточно хорошо, и он очень прост в использовании. Вам не нужно ничего знать о том, какой шрифт используется, обо всем позаботится обозреватель.

Вы можете играть с ним на http://jsfiddle.net/tubededentifrice/u5y15d0L/2/

Здесь происходит волшебство:

 var setMaxTextSize=function(jElement) { //Get and set the font size into data for reuse upon resize var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size")); jElement.data(quickFitFontSizeData,fontSize); //Gradually increase font size until the element gets a big increase in height (ie line break) var i=0; var previousHeight; do { previousHeight=jElement.height(); jElement.css("font-size",""+(++fontSize)+"px"); } while(i++<300 && jElement.height()-previousHeight 

Этот веб-компонент изменяет размер шрифта, поэтому ширина внутреннего текста соответствует ширине контейнера. Проверьте демонстрационную версию .

Вы можете использовать его следующим образом:

 Lorem Ipsum 

Моя проблема была аналогичной, но связана с масштабированием текста внутри заголовка. Я попробовал Fit Font, но мне нужно было переключить компрессор, чтобы получить какие-либо результаты, поскольку он решал немного другую проблему, как и Text Flow. Поэтому я написал свой собственный небольшой плагин, который уменьшает размер шрифта, чтобы он соответствовал контейнеру, предполагая, что у вас есть overflow: hidden и white-space: nowrap так что даже если сокращение шрифта до минимума не позволяет показывать полный заголовок, это просто отсекает то, что он может показать.

 (function($) { // Reduces the size of text in the element to fit the parent. $.fn.reduceTextSize = function(options) { options = $.extend({ minFontSize: 10 }, options); function checkWidth(em) { var $em = $(em); var oldPosition = $em.css('position'); $em.css('position', 'absolute'); var width = $em.width(); $em.css('position', oldPosition); return width; } return this.each(function(){ var $this = $(this); var $parent = $this.parent(); var prevFontSize; while (checkWidth($this) > $parent.width()) { var currentFontSize = parseInt($this.css('font-size').replace('px', '')); // Stop looping if min font size reached, or font size did not change last iteration. if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize || prevFontSize && prevFontSize == currentFontSize) { break; } prevFontSize = currentFontSize; $this.css('font-size', (currentFontSize - 1) + 'px'); } }); }; })(jQuery); 

Я подготовил простую функцию масштабирования, используя css transform вместо font-size. Вы можете использовать его внутри любого контейнера, вам не нужно устанавливать медиа-запросы и т. Д. 🙂

Сообщение в блоге: https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/

Код:

 function scaleHeader() { var scalable = document.querySelectorAll('.scale--js'); var margin = 10; for (var i = 0; i < scalable.length; i++) { var scalableContainer = scalable[i].parentNode; scalable[i].style.transform = 'scale(1)'; var scalableContainerWidth = scalableContainer.offsetWidth - margin; var scalableWidth = scalable[i].offsetWidth; scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')'; scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px'; } } 

Рабочая демонстрация: https://codepen.io/maciejkorsan/pen/BWLryj

взгляните на мой код, он уменьшит font size smaller

но я думаю, что это не привело к хорошему пользовательскому опыту

 var containerWidth = $("#ui-id-2").width(); var items = $(".quickSearchAutocomplete .ui-menu-item"); var fontSize = 16; items.each(function(){ //display value depend sometimes on your case you may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width $(this).css({"whiteSpace":"nowrap","display":"inline-block"}); while ($(this).width() > containerWidth){ console.log("$(this).width()"+ $(this).width() + "containerWidth" + containerWidth) $(this).css("font-size", fontSize -= 0.5); } }); 

результат

надеюсь, это поможет вам

Всегда иметь свой элемент с этим атрибутом:

Javascript: element.style.fontSize = "100%";

или

CSS: style = "font-size: 100%;"

Когда вы идете в полноэкранный режим, вы уже должны иметь вычисляемую переменную масштаба (масштаб> 1 или масштаб = 1). Затем, на полноэкранном режиме:

 document.body.style.fontSize = (scale * 100) + "%"; 

Он отлично работает с небольшим кодом.

В качестве резервной копии JavaScript (или вашего единственного решения) вы можете использовать мой плагин jQuery Scalem , который позволяет масштабировать относительно родительского элемента (контейнера) путем передачи reference параметра.

В случае, если это полезно для всех, большинство решений в этом streamе были обертыванием текста на несколько строк, форма e.

Но потом я нашел это, и это сработало:

https://github.com/chunksnbits/jquery-quickfit

Пример использования:

$('.someText').quickfit({max:50,tolerance:.4})

Попробуйте использовать плагин fitText , поскольку размеры Viewport не являются решением этой проблемы. Просто добавьте библиотеку

и resize шрифта для правильной настройки коэффициента коэффициента текста:

 $("#text_div").fitText(0.8); 

вы можете установить максимальные и минимальные значения текста:

 $("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' }); 

Для динамического текста этот плагин весьма полезен http://freqdec.github.io/slabText/ . Просто добавьте css

 .slabtexted .slabtext { display: -moz-inline-box; display: inline-block; white-space: nowrap; } .slabtextinactive .slabtext { display: inline; white-space: normal; font-size: 1em !important; letter-spacing: inherit !important; word-spacing: inherit !important; *letter-spacing: normal !important; *word-spacing: normal !important; } .slabtextdone .slabtext { display: block; } 

и скрипт

 $('#mydiv').slabText(); 

Чтобы размер шрифта соответствовал его контейнеру, а не окно, см. resizeFont() я поделил в этом вопросе (комбинация других ответов, большинство из которых уже связаны здесь). Он запускается с использованием window.addEventListener('resize', resizeFont); ,

Vanilla JS: Изменить размер шрифта – удивительный, чтобы соответствовать контейнеру

JS:

 function resizeFont() { var elements = document.getElementsByClassName('resize'); console.log(elements); if (elements.length < 0) { return; } _len = elements.length; for (_i = 0; _i < _len; _i++) { var el = elements[_i]; el.style.fontSize = "100%"; for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) { el.style.fontSize = size + '%'; } } } 

You could perhaps use vw/vh as a fallback, so you dynamically assign em or rem units using javascript, ensuring that the fonts do scale to the window if javascript is disabled.

Apply the .resize class to all elements containing text you wish to be scaled.

Trigger the function prior to adding the window resize event listener. Then, any text which doesn’t fit its container will be scaled down when the page loads, as well as when it is resized.

NOTE: The default font-size must be set to either em , rem or % to achieve proper results… and if the styling of your elements is too complex then the browser might crash if you start frantically resizing the window.

Это сработало для меня:

I try to approx font-size based on a width/heght got from setting font-size:10px. Basically the idea is “if i have 20px width and 11px height with font-size:10px, so what would it be the max font-size to math a container of 50px width and 30px height?”

The answer is a double proportion system:

{ 20:10=50:X, 11:10=30:Y } = { X= (10*50)/20 , Y= (10*30)/11 }

Now X is a font-size that will match width, Y is a font-size that will match height; take the smallest value

 function getMaxFontSizeApprox(el){ var fontSize = 10; var p = el.parentNode; var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight; if(!parent_h)parent_h = 0; var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth; if(!parent_w)parent_w = 0; el.style.fontSize = fontSize + "px"; var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight; if(!el_h)el_h = 0; var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth; if(!el_w)el_w = 0; //0.5 is the error on the measure that js does //if real measure had been 12.49 px => js would have said 12px //so we think about the worst case when could have, we add 0.5 to //compensate the round error var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5); var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5); fontSize = Math.floor(Math.min(fs1,fs2)); el.style.fontSize = fontSize + "px"; return fontSize; } 

NB: the argument of the function must be a span element or an element wich is smaller than it’s parent, otherwise if children and parent have both the same width/height function will fail

I don’t see any answer with reference to CSS flex property, but it can be very useful too.

If the issue is font getting too big on widescreen desktop, I think the easiest css method would be something like this (assuming wrapper max 1000px wide)

 .specialText{ font-size:2.4vw; } @media only screen and (min-width: 1000px) { .specialText { width:24px; } } 

So it is auto sized for any screen smaller than the max width of your container, and fixed size when screen is wider (like virtually all desktop/laptops)

Давайте будем гением компьютера.