Как увеличить размер шрифта в зависимости от ширины окна?

Question

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

Любая помощь очень ценится. ;)

Answer 1

Если вы заинтересованы / можете использовать CSS3 , тогда существует простое решение CSS - медиазапросы >> http://www.w3.org/TR/css3-mediaqueries/

Так, например, CSS:

@media screen and (min-device-width: 800px) { ... }

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

Возможно, вы также захотите рассмотреть готовый javascript в конце этой ссылки ... http://www.themaninblue.com/experiment/ResolutionLayout/#

Answer 2

ОК - для начала вы должны использовать Ems для максимально возможного количества измерений в вашем пользовательском интерфейсе.По крайней мере, размер всех ваших текстовых элементов с Ems (а не пикселей или%).Если возможно, установка ширины блоков макета в Ems также поможет пропорционально масштабировать приложение.Если вы можете установить все свои размеры в Ems, все ваше приложение будет визуально масштабируемым.

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

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

Я бы использовал библиотеку javascript, чтобы упростить обнаружение ширины области просмотра - она, как известно, различна в разных браузерах.С помощью jQuery код может выглядеть следующим образом:

$(function(){
  var viewPortWidth = $(window).width();

  if (viewPortWidth > 1900) {$('body').addClass('extraWide')}
  else if (viewPortWidth > 1400) {$('body').addClass('wide')}
  else if (viewPortWidth > 1000) {$('body').addClass('standard')}
  else if (viewPortWidth > 700) {$('body').addClass('narrow')}
  else {$('body').addClass('extraNarrow')}

});

И CSS:

<style type="text/css">

  body {font-size:62.5%;}  /* Set the size of 1em to 10px in all browsers */

  body.extraWide {font-size:85%;}
  body.wide {font-size:75%;}

  body.narrow {font-size:50%;}
  body.extraNarrow {font-size:40%;}

</style>

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

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

Answer 3

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

На самом деле есть другой подход, кроме Media Queries, который также является чистым CSS:

---

Единицы просмотра: vw, vh, vmin, vmax.

Это единицы длины, представляющие 1% от размера области просмотра для ширины области просмотра (vw), высоты (vh), меньшего из двух (vmin) или большего из двух (vmax).

Так, например, вы можете использовать:

CSS:

body {
    font-size:5vmin;
}

Устанавливает размер шрифта всего документа на 5% от наименьшего размера области просмотра (ширина или высота). Так, например, на iPad (1024 x 768 px) font-size будет 38,4 px (5% от 768 px, потому что это наименьший размер любого из размеров области просмотра) .

Совместимость браузера: https://caniuse.com/#feat=viewport-units

Answer 4

Лучшая версия (для меня) решения, предоставленного japanFour:

$(document).ready(scaleFont);
$(window).resize(scaleFont);


function scaleFont() {

  var viewPortWidth = $(window).width();

  if (viewPortWidth >= 1900) {$('body').attr('class','extraWide');}
  else if (viewPortWidth >= 1400) {$('body').attr('class','wide');}
  else if (viewPortWidth >= 1000) {$('body').attr('class','');}
  else if (viewPortWidth >= 700) {$('body').attr('class','narrow');}
  else {$('body').attr('class','extraNarrow');}
}

Таким образом, он изменяет размеры только в том случае, если окно изменено (избегая setTimout), и вы даете body только точноекласс это нужно

Answer 5

Что-то не так с приведенным ниже кодом?Хотя я согласен, что медиа-запросы очень полезны, я хотел постоянно масштабировать размер шрифта определенных элементов моей страницы, так как окно увеличивалось или уменьшалось.Этот код выглядит намного проще, чем другие решения jquery для установки констант класса на основе ширины пикселя области просмотра:

$(document).ready(function() {

  var setFontSize = function() {
    var viewportWidth = $(window).width();
    var fontSize = Math.sqrt(viewportWidth/250);
    $('.myElement').css('font-size',fontSize+'em');
  };

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

  setFontSize();

});

Answer 6

Вот мой подход (удаление реальных классов + Drupal 7 jQuery):

(function ($) {
$(document).ready(function() {


var bodyClassArr = new Array('extraWide', 'wide', 'normal', 'narrow', 'extraNarrow', 'mobile');

function setBodyClass(){
  // remove previous classes
  for(x in bodyClassArr){
      if($('body').hasClass(bodyClassArr[x])){ $('body').removeClass(bodyClassArr[x]); }
  }
  var viewPortWidth = $(window).width();
  if (viewPortWidth > 1900) { $('body').addClass('extraWide'); }
  else if (viewPortWidth > 1400) { $('body').addClass('wide'); }
  else if (viewPortWidth > 1000) { $('body').addClass('normal'); }
  else if (viewPortWidth > 700) { $('body').addClass('narrow'); }
  else if (viewPortWidth < 700) { $('body').addClass('mobile'); }
  else { $('body').addClass('normal'); }
};
setBodyClass();

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

}); // jquery end
}(jQuery));

Answer 7

Вот более простое и беспроблемное решение:

onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}

Answer 8

Ответ Биджамина сработал, как и ожидалось, я добавил установленное время ожидания, чтобы оно масштабировалось в реальном времени. Это не меняет масштаб, хотя.

$(document).ready(function() {scaleFont();});

    function scaleFont() {

      var viewPortWidth = $(window).width();

      if (viewPortWidth > 1900) {$('body').addClass('extraWide')}
      else if (viewPortWidth > 1400) {$('body').addClass('wide')}
      else if (viewPortWidth > 1000) {$('body').addClass('standard')}
      else if (viewPortWidth > 700) {$('body').addClass('narrow')}
      else {$('body').addClass('extraNarrow')}

      setTimeout(scaleFont, 100); 
    }

РЕДАКТИРОВАТЬ: РЕШЕНО ОБРАТНЫЙ ЭФФЕКТ

$(document).ready(function() {scaleFont();});

    function scaleFont() {

      var viewPortWidth = $(window).width();

      if (viewPortWidth >= 1900) {$('body').addClass('extraWide').removeClass('wide, standard, narrow, extraNarrow')}
      else if (viewPortWidth >= 1400) {$('body').addClass('wide').removeClass('extraWide, standard, narrow, extraNarrow')}
      else if (viewPortWidth >= 1000) {$('body').addClass('standard').removeClass('extraWide, wide, narrow, extraNarrow')}
      else if (viewPortWidth >= 700) {$('body').addClass('narrow').removeClass('extraWide, standard, wide, extraNarrow')}
      else {$('body').addClass('extraNarrow').removeClass('extraWide, standard, wide, narrow')}


      setTimeout(scaleFont, 100); 
    }