но что, если контейнер не является видовым окном (телом)?

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

этот факт не означает 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 [i.e. 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 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw; 
}

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

если размер контейнера изменяется динамически...

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

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

Вызов

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

то, что я делаю в одном из моих проектов, - это "смесь" между vw и vh, чтобы настроить размер шрифта для моих потребностей, например.:

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

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

решение с SVG:

<div style="width: 60px;">  
  <svg width="100%" height="100%" viewBox="0 -200 1000 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text font-size="300" fill="black">Text</text>
  </svg>
</div>

https://jsfiddle.net/qc8ht5eb/

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

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 */

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

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 */

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

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

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

вот функция:

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/

Pure-CSS решение с calc(), CSS единиц и математика

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

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

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

математика

вам понадобится:

• хорошо отрегулированный коэффициент в некотором видовом экране, я использовал 320px, таким образом, я получил 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 означает полную ширину окна просмотра, и моя цель состояла в том, чтобы установить заголовок полной ширины с некоторым дополнением.

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

вывод

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

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

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

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

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

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

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

.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 в скрипке-это просто моя пользовательская функция перетаскивания

есть способ сделать это без javascript!

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

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

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE 0</text>

  </svg>

</div>

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/

хочется чего-то большего кричащий?

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

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

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

вот сценарий, который я только что написал на основе @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, '' ));
      }
      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;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
  <h2>Lorem ipsum dolor</h2>
  <h2>Test String</h2>
  <h2>Sweet Concatenation</h2>
  <h2>Font Scaling</h2>
</div>

это в основном уменьшает размер шрифта на 1em, а затем начинает увеличиваться на 0.1, пока не достигнет максимальной ширины.

jsFiddle

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

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

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

    @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<fontSize/2)

    //Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
    fontSize-=1;
    jElement.addClass(quickFitSetClass).css("font-size",""+fontSize+"px");

    return fontSize;
};

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

вы можете использовать его как это:

<full-width-text>Lorem Ipsum</full-width-text>

моя проблема была похожа, но связана с масштабированием текста в заголовке. Я попробовал Fit Font, но мне нужно было переключить компрессор, чтобы получить какие-либо результаты, так как он решал немного другую проблему, как и текстовый поток. Поэтому я написал свой собственный маленький плагин, который уменьшает размер шрифта, чтобы соответствовать контейнер, если у вас есть 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 вместо размера шрифта. Вы можете использовать его внутри любого контейнера, вам не нужно устанавливать медиа-запросы и т. д.:)

запись в блоге: 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 to fit что бы там ни было

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

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 (или вашего единственного решения) вы можете использовать my плагин jQuery Scalem, что позволяет масштабировать относительно родительского элемента (контейнера), передавая .

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

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

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

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

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.fittext.js"></script>

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

$("#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();

чтобы размер шрифта соответствовал его контейнеру, а не окну см.

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

Я пытаюсь приблизить размер шрифта на основе ширины / высоты, полученной от установки размера шрифта:10px. В основном идея заключается в том, что "если у меня есть ширина 20px и высота 11px с размером шрифта:10px, так что это будет максимальный размер шрифта для математики контейнера шириной 50px и высотой 30px?"

ответ-это система двойной пропорции:

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

теперь X-это размер шрифта, который будет соответствовать width, Y-размер шрифта, который будет соответствовать высоте; возьмите наименьшее значение

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: аргумент функции должен быть элементом span или элементом, который меньше, чем его родитель, в противном случае, если дочерние и родительские элементы имеют одинаковую функцию ширины/высоты, произойдет сбой

Я не вижу никакого ответа со ссылкой на свойство CSS flex, но это тоже может быть очень полезно.

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

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

.container {
    width: 100%;
    max-width: 600px;
}
.headline {
    font-size: 20vw;
}
.subhead {
    font-size: 5vw;
}
@media (min-width:600px) {
    .headline {
        font-size: 120px;
    }
    .subhead {
        font-size: 32px;
    }
}

использовать переменные CSS

никто еще не упоминал переменные CSS, и этот подход работал лучше всего для меня, так что:

допустим, у вас есть столбец на Вашей странице, который составляет 100% ширины экрана мобильного пользователя, но имеет max-width 800px, так что на рабочем столе есть некоторое пространство по обе стороны от столбца. Поместите это в верхней части страницы:

<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>

и теперь вы можете использовать эту переменную (вместо встроенного vw unit), чтобы установить размер шрифта. Е. Г.

p {
  font-size: calc( var(--column-width) / 100 );
}

это не чисто CSS подход, но это довольно близко.

Если проблема заключается в том, что шрифт становится слишком большим на широкоэкранном рабочем столе, я думаю, что самый простой метод css будет чем-то вроде этого (предполагая, что обертка max 1000px wide)

.specialText{
    font-size:2.4vw;
}

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

таким образом, он автоматически определяется для любого экрана меньше, чем максимальная ширина вашего контейнера, и фиксированный размер, когда экран шире (как практически все настольные/ноутбуки)