Можно ли динамически масштабировать размер текста на основе ширины браузера?

Вот проект, который предназначен для: http://phlak.github.com/jColorClock/. Как вы можете видеть, прямо сейчас размер текста задан как статический размер. Я бы хотел, чтобы текст всегда составлял ~ 90% от ширины окна, но также соответствующим образом масштабировал вертикальный размер. Есть ли относительно простой способ сделать это?

Ответ 1

Ад, да!

Установите размер шрифта <body> при изменении размера окна с помощью небольшого javascript. (Я использовал jQuery для удобства здесь:

$( document ).ready( function() {
            var $body = $('body'); //Cache this for performance

            var setBodyScale = function() {
                var scaleSource = $body.width(),
                    scaleFactor = 0.35,                     
                    maxScale = 600,
                    minScale = 30; //Tweak these values to taste

                var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                if (fontSize > maxScale) fontSize = maxScale;
                if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                $('body').css('font-size', fontSize + '%');
            }

            $(window).resize(function(){
                setBodyScale();
            });

            //Fire it when the page first loads:
            setBodyScale();
        });

Поскольку ваш размер шрифта установлен в em (идеальный), корректировка процентного размера шрифта элемента body действует как универсальное "текстовое масштабирование". Это уменьшит любой текст, установленный в em - если вы хотите быть более конкретным, вы можете установить процентный размер шрифта на <div>, который окружает только те элементы, которые вы хотите масштабировать.

Вот быстрый пример: http://www.spookandpuff.com/examples/dynamicTextSize.html

Ответ 2

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

font-size: 35vmin;

Ответ 3

Другой вариант, когда вам не нужна такая высокая точность (например, размер пары для разных устройств), заключается в использовании медиа-запросов.

Ответ 4

То же, что и Beejamin, отличный ответ с паролями настроек.

Математика была настроена так, что вы можете установить "ширину по умолчанию", при которой не будет масштабирования. Это упрощает проектирование до заданной ширины с точными размерами шрифта.
Теперь размер шрифта устанавливается в элементе html, освобождая элемент body для хранения размера шрифта в css.

$(function() {

  // At this width, no scaling occurs. Above/below will scale appropriately.
  var defaultWidth = 1280;

  // This controls how fast the font-size scales. If 1, will scale at the same 
  // rate as the window (i.e. when the window is 50% of the default width, the 
  // font-size will be scaled 50%). If I want the font to not shrink as rapidly 
  // when the page gets smaller, I can set this to a smaller number (e.g. at 0.5,
  // when the window is 50% of default width, the font-size will be scaled 75%).
  var scaleFactor = 0.5;

  // choose a maximum and minimum scale factor (e.g. 4 is 400% and 0.5 is 50%)
  var maxScale = 4;
  var minScale = 0.5;

  var $html = $("html");

  var setHtmlScale = function() {

    var scale = 1 + scaleFactor * ($html.width() - defaultWidth) / defaultWidth;
    if (scale > maxScale) {
      scale = maxScale;
    }
    else if (scale < minScale) {
      scale = minScale;
    }
    $html.css('font-size', scale * 100 + '%');
  };

  $(window).resize(function() {
    setHtmlScale();
  });

  setHtmlScale();
});

Ответ 5

Здесь я нашел другой способ решить эту проблему.

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

Ширина ссылки указывается как размер по умолчанию, для которого один ремень отображается по умолчанию по 16-пиксельному размеру. Также даются минимальные и максимальные размеры.

DEMO: http://jsbin.com/kahabo/1/

JS:

var defaultReferenceWidthPx = 320; // Size at which 1 CSS rem displays as 1 rem.
var minRootFontSizePx = 16.363636016845703;
var maxRootFontSizePx = 1024 / 320 * 16.363636016845703;
var defaultRootFontSizePx = 16.363636016845703; // HTML default for 1 rem.
var rootResizeFactor = defaultRootFontSizePx / defaultReferenceWidthPx;
var docEl; // Document root element (`html`).

var resizeRoot = function() {
  // Use clientWidth (excludes border & scrollbar) or offsetWidth (includes border & scrollbar).
  var referenceWidthPx = docEl.clientWidth;
  var newRootFontSizePx = rootResizeFactor * referenceWidthPx;
  if(newRootFontSizePx < minRootFontSizePx) {
    newRootFontSizePx = minRootFontSizePx;
  } else if(newRootFontSizePx > maxRootFontSizePx) {
    newRootFontSizePx = maxRootFontSizePx;
  }
  docEl.style.fontSize = newRootFontSizePx + 'px';
};

document.addEventListener('DOMContentLoaded', function() {
  docEl = document.documentElement;
  window.addEventListener('resize', resizeRoot, false);
  resizeRoot();
});

HTML:

<div class="fixed">
  Lorem ipsum dolor sit amet, per iisque omnesque inciderint ex. Has at facete iuvaret pertinacia, vocibus nominavi intellegam per cu.
</div>
<div class="responsive">
  Lorem ipsum dolor sit amet, per iisque omnesque inciderint ex. Has at facete iuvaret pertinacia, vocibus nominavi intellegam per cu.
</div>

CSS

body {
  margin: 0;
}
.fixed {
  border: solid gray;
  width: 100px;
  padding: 10px;
  border-width: 10px;
  font-size: 10px;
}
.responsive {
  border: solid gray;
  width: 6.25rem;
  padding: 0.5rem;
  border-width: 0.75rem;
  font-size: 0.6rem;
}

REPO: https://github.com/jaepage/wtf-is-rem-in-css

Ответ 6

Если вы используете jQuery, вы можете попробовать FitText. Это позволяет легко масштабировать текст по ширине элемента.

Другой вариант FlowType.JS, который работает аналогичным образом.

Ответ 7

Совместимость с совместимыми браузерами
Без нарушения или ограничения доступности браузера.
Без изменения атрибутов стиля.
без размытия шрифтов.
Без браузеров.
Работает на OSX, чтобы максимизировать и восстановить.
С обратными вызовами для определения уровня масштабирования браузера.

Попробуйте Mimetic.js