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

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

27 голосов
/ 19 марта 2011

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

Ответы [ 7 ]

47 голосов
/ 19 марта 2011

Черт, да!

Установите размер шрифта <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

12 голосов
/ 29 июля 2013

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

font-size: 35vmin;
5 голосов
/ 23 апреля 2013

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

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

  2. Размер шрифта теперь установлен для элемента 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 голосов
/ 08 марта 2012

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

0 голосов
/ 14 апреля 2017
  • С постоянной совместимостью между браузерами
  • Без нарушения или уменьшения масштаба браузера.
  • Без изменения атрибутов стиля.
  • без размытия шрифтов.
  • Без перехвата браузера.
  • Работает на OSX для увеличения и восстановления.
  • С обратными вызовами для определения уровня масштабирования браузера.

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

0 голосов
/ 08 ноября 2014

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

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

0 голосов
/ 22 августа 2014

Вот еще один способ решить эту проблему.

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

В качестве размера по умолчанию указывается эталонная ширина, для которой один бэр отображается с размером по умолчанию 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's 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;
}

РЕПО: https://github.com/jaepage/wtf-is-rem-in-css

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...