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

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

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

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

Если вы заинтересованы в использовании CSS3, то есть чисто CSS решение - media queries >> http://www.w3.org/TR/css3-mediaqueries/

Например, CSS:

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

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

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