Использование ширины видовых экранов для размера шрифта, как я могу убедиться, что они относятся к родительскому контейнеру, а не к окну просмотра? [Дубликат]

int array[ 6 ] = { 1, 2, 3, 4, 5, 6 };
std::vector< int > a( array, array + 6 );
stringstream dataString; 
ostream_iterator<int> output_iterator(dataString, ";"); // here ";" is delimiter 
std::copy(a.begin(), a.end(), output_iterator);
cout<<dataString.str()<<endl;

output = 1; 2; 3; 4; 5; 6;

855
задан Pang 30 June 2016 в 03:39
поделиться

30 ответов

РЕДАКТИРОВАТЬ: Если контейнер не является телом CSS Tricks охватывает все ваши варианты здесь: https://css-tricks.com/fitting-text-to-a-container/

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

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

Значения:

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

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

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

p {
    font-size: 4vw;
}

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

Эти значения являются единицами калибровки, как px или em, поэтому они могут (g22)

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

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/

1183
ответ дан jbenjohnson 16 August 2018 в 14:19
поделиться
  • 1
    Но что, если контейнер не является окном просмотра (тело)? – Alex 6 November 2013 в 16:43
  • 2
    @Alex, это территория JS. Попробуйте альтернативу FitText.js, предоставленную в нижней части статьи @jbenjohnson. – Robbert 6 November 2013 в 16:44
  • 3
    Здесь возникают так называемые запросы элементов. В отличие от медиа-запросов, запросы элементов будут определять размер объектов на основе его блока, а не видового экрана, что было бы потрясающе! Но, к сожалению, пока этого не существует. Тем не менее, некоторые полиполки и доказательство концепций существуют, если вам интересно: coding.smashingmagazine.com/2013/06/25/… и filamentgroup.com/lab/element_query_workarounds – jbenjohnson 6 November 2013 в 16:53
  • 4
    С тех пор я не знаю, но теперь размер шрифта генерируется динамически в chrome и firefox. поэтому вы можете масштабировать свое окно, чтобы увидеть изменение размера шрифта. – Claudiu Creanga 13 September 2014 в 18:58
  • 5
    Понижен, потому что это не отвечает на вопрос. Он спросил о контейнере, а не в видовом экране. Полностью другой вариант использования. – Mick79 23 July 2016 в 20:35

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

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

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

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE $500</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/

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

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

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

12
ответ дан Aaron Loften 16 August 2018 в 14:19
поделиться

Моя проблема была похожа, но связана с масштабированием текста внутри заголовка. Я попробовал 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);
5
ответ дан Aram Kocharyan 16 August 2018 в 14:19
поделиться

взгляните на мой код, он делает font size smaller на 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);
    }
});

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

3
ответ дан Basheer AL-MOMANI 16 August 2018 в 14:19
поделиться

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

    @media only screen and (max-width: 320px) {

       body { font-size: 1em; }

    }

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

6
ответ дан Chunky 16 August 2018 в 14:19
поделиться

Существует большая философия для этой проблемы. Проще всего сделать это, чтобы дать определенный размер шрифта телу (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 */

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, скажем так. И на вашей идее, которая станет на контейнере шириной 300 пикселей с размером шрифта 4px. Должен быть нижний предел. Другие решения были бы с медиа-запросами, так что вы могли бы установить шрифт для разных ширины.

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

21
ответ дан Dan Ovidiu Boncut 16 August 2018 в 14:19
поделиться
  • 1
    Второй пример кода использует em вместо rem. – Timo 16 September 2014 в 12:46
  • 2
    Модуль rem относится к корневому элементу, то есть к элементу html, а не к элементу body. Корневым элементом в DOM является тег html. developer.mozilla.org/en-US/docs/Web/CSS/length .. rem всегда относится к тегу html, который является корневым элементом, а не тегом body. но хороший ответ :) – Jonathan Marzullo 12 January 2016 в 19:19
  • 3
    fittext.js делает работу, я рекомендую это решение! – Jacek Dziurdzikowski 20 February 2018 в 10:37

Попробуйте использовать плагин 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);

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

$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });
2
ответ дан dsb 16 August 2018 в 14:19
поделиться
  • 1
    Это полезно только для Big display text и не рекомендуется для абзацев. – Shiv 26 October 2017 в 11:34

Решение с 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/

20
ответ дан eatonphil 16 August 2018 в 14:19
поделиться
  • 1
    Сначала эта идея выглядит приятной. Затем вы понимаете, что вы не можете легко управлять шрифтом на SVG внутри & lt; html & gt ;. Шрифт отличается от мобильных и настольных, что влияет на конечную ширину. – Stopi 4 May 2016 в 12:14
  • 2
    @Stopi, что вы думаете о решении iFrame? [Д0] пример – Danto 12 December 2017 в 15:15
  • 3
    Вы можете полностью настроить SVG из HTML / CSS – gman 5 January 2018 в 16:13
  • 4
    SVG может быть в стиле css, если svg является встроенным (не используйте тег img). – Aaron Loften 13 March 2018 в 16:30
  • 5
    Это лучшее, наиболее предсказуемое решение, которое масштабируется на основе динамического контейнера. – JoshuaDavid 10 April 2018 в 14:48

Чтобы размер шрифта соответствовал его контейнеру, а не окно, см. функцию 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 + '%';
    }
  }
}

] Возможно, вы можете использовать vw / vh как резерв, поэтому вы динамически назначаете блоки em или rem с помощью javascript, гарантируя, что шрифты будут масштабироваться до окна, если javascript отключен.

Применить .resize для всех элементов, содержащих текст, который вы хотите масштабировать.

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

ПРИМЕЧАНИЕ. Значение по умолчанию font-size должно быть установлено как em , rem или % для достижения правильных результатов ... и если стиль ваших элементов слишком сложный, браузер может упасть, если вы начнете отчаянно изменять размер окна.

2
ответ дан Joshua Flood 16 August 2018 в 14:19
поделиться

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

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

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

22
ответ дан lsblsb 16 August 2018 в 14:19
поделиться
  • 1
    Возможно, вам лучше использовать vmin и / или vmax. – sebastian_k 11 November 2016 в 21:52
  • 2
    Инструменты chrome dev называет это недопустимым значением свойства – Blauhirn 3 August 2018 в 10:32

Я подготовил простую функцию масштабирования, используя 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 / ручка / BWLryj

5
ответ дан Maciej Korsan 16 August 2018 в 14:19
поделиться

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

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

или

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

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

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

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

2
ответ дан marirena 16 August 2018 в 14:19
поделиться

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

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

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

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

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

2
ответ дан Maurizio Ricci 16 August 2018 в 14:19
поделиться

Для динамического текста этот плагин весьма полезен 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();
2
ответ дан pajouk 16 August 2018 в 14:19
поделиться

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

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

6
ответ дан Pixel Reaper 16 August 2018 в 14:19
поделиться

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

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

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

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

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

2
ответ дан pk1557 16 August 2018 в 14:19
поделиться

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

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

<full-width-text>Lorem Ipsum</full-width-text>
6
ответ дан pomber 16 August 2018 в 14:19
поделиться

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

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

Как говорится, трюк заключается в использовании vmin и установке размера iframe, так что общая высота [fraction] * является хорошим размером шрифта, когда высота является предельным размером, а [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. Реальное решение будет заключаться в том, чтобы браузеры предоставляли способ масштабирования текста как функции родительского контейнера AND, а также предоставляли те же функции типа vmin / vmax.

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

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

13
ответ дан Roman Rekhler 16 August 2018 в 14:19
поделиться

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

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

6
ответ дан scoota269 16 August 2018 в 14:19
поделиться

Вы ищете что-то вроде этого? => 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
});
6
ответ дан Sijav 16 August 2018 в 14:19
поделиться

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

1
ответ дан Smart Coder 16 August 2018 в 14:19
поделиться

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

2
ответ дан thdoan 16 August 2018 в 14:19
поделиться

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

Вот функция:

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/

19
ответ дан tnt-rox 16 August 2018 в 14:19
поделиться

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

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

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

13
ответ дан toddmo 16 August 2018 в 14:19
поделиться
  • 1
    Это решение работает только с IF (1), вы знаете шрифт, (2) шрифт доступен на устройстве пользователя и (3) текст всегда один и тот же. Это делает его очень ограниченным вариантом использования. – Andrei Volgin 17 November 2016 в 20:17
  • 2
    Я не понимаю, что, если мой контейнер исправит, например: 640px и соотношение 16: 9. который вычисляет, я должен написать? – pery mimon 18 May 2017 в 11:16
  • 3
    Ширина вашего контейнера x равна 640px и отношению r 16: 9, поэтому: x = 640px, r = 16 / 9, y = x / r = 640px / (16 / 9) = 360px – hegez 18 May 2017 в 13:36
  • 4
    Примечание: это работает только в том случае, если у вас есть текст размером 16: 9, что является нечетной ситуацией. Возможно, второе время поможет прочитать ответ. Кроме того, это работает только для однострочных. – hegez 18 May 2017 в 13:42

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

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

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

Пример 1

[. g11] Однако при использовании контейнера с гибкой шириной необходимо убедиться, что в какой-то мере контейнер все еще имеет размер в окне просмотра . Таким образом, это вопрос настройки параметра 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, вы можете «мыслить» математически по отношению к полному размеру видового экрана, но вам не нужно делать это. Текст будет «гибким» с контейнером, потому что контейнер сгибается с изменением размера видового экрана. UPDATE: вот пример двух контейнеров различного размера .

Пример 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 200% 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() было бы сложно настроить динамически, поскольку эта функция не работает для font-size в настоящее время. Таким образом, вы не сможете выполнить чистую настройку CSS3, если ваша ширина меняется на calc(). Конечно, незначительная корректировка ширины для полей может быть недостаточной, чтобы гарантировать любое изменение в font-size, поэтому это может не иметь значения.

254
ответ дан user2867288 16 August 2018 в 14:19
поделиться
  • 1
    (Есть ошибка Chrome с длиной в процентах в окне просмотра и изменением размера окна: code.google.com/p/chromium/issues/detail?id=124331 ) – thirtydot 12 November 2013 в 20:10
  • 2
    @thirtydot: Это несчастливо (но хорошо, что нужно знать, спасибо). Надеюсь, что ошибка будет решена в ближайшее время, но похоже, что она сохраняется в течение некоторого времени. – ScottS 12 November 2013 в 20:16
  • 3
    Большой ответ, однако, не будет работать, если содержащий элемент имеет максимальную ширину. – Himmators 14 November 2014 в 14:19
  • 4
    @KristofferNolgren: Это относится к двум моментам, указанным в моем ответе: (1) ", предполагая, что контейнер каким-то образом является гибким по размеру" (как только «max-width» достигнут, он больше не сгибается, поэтому возникает проблема). (2) Если можно определить, в какой точке «max-width» будет достигнута, то, как я заметил, вы могли бы установить точку останова @media, чтобы изменить размер шрифта в этой точке (по существу, придав ему фиксированный размер при достижении max-width). Просто мысль работать с ситуацией max-width. – ScottS 14 November 2014 в 17:26
  • 5
    Как вы думаете, вы можете бросить скрипку, когда элемент контейнера динамически меняется с помощью медиа-запросов? Я не уверен, что понимаю. – J82 13 January 2015 в 09:34

Мое собственное решение, основанное на 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;
};
6
ответ дан Vincent 16 August 2018 в 14:19
поделиться
  • 1
    Поскольку этот скрипт будет запускаться при каждом изменении размера и / или изменении ориентации, я не рекомендую использовать это. Вместо использования javascript-решения найдите решение на основе css, как указано выше. – Pilatus 9 April 2015 в 10:24
  • 2
    Изменения размера и ориентации являются «редкими». событий, здесь нет проблем с производительностью. Если вы предпочитаете, не связывайтесь с событиями (если они не изменяют размер контейнеров, например, для сайтов, не отвечающих требованиям). Решения CSS не работают во всех случаях, не думая ни о чем (например, о ширине шрифта или так), как это делает решение. – Vincent 9 April 2015 в 15:24
  • 3
    Я завернул ваш ответ как функцию jQuery. Он получает максимальную разрешенную высоту, минимальный и максимальный размер шрифта. См. jsfiddle.net/oriadam/qzsy760k – oriadam 29 September 2016 в 12:57

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

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

$('#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;  
}
<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

7
ответ дан WoodrowShigeru 16 August 2018 в 14:19
поделиться

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

.specialText{
    font-size:2.4vw;
}

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

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

-1
ответ дан Xeridea 16 August 2018 в 14:19
поделиться
0
ответ дан Joe 29 October 2018 в 12:55
поделиться
0
ответ дан Justin Krause 29 October 2018 в 12:55
поделиться
Другие вопросы по тегам:

Похожие вопросы: