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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

Лучшая версия (для меня) решения, предоставленного 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 только точный класс, который ему нужен

Ответ 4

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

Существует другой подход, отличный от 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 пикселей, так как это самый маленький размер размеров видовых экранов).

Столь же здорово, что это может звучать, в нем еще есть несколько вопросов, которые следует учитывать:

• Chrome не поддерживает единицы просмотра для border widths, column gaps, transform values, box shadows или в calc() до версии 34;
• Safari и iOS Safari (обе версии 6 и 7) поддерживают не для border widths, column gaps, transform values, box shadows или в calc();
• iOS 7 Safari устанавливает значения единицы просмотра в 0, если страница оставлена ​​и возвращается через 60 секунд;
• Internet Explorer 9 в режиме печати интерпретирует vh как страницы. 30vh = 30 страниц;
• iOS 7 Safari пересчитывает ширины, установленные в vh как vw, а высоты устанавливаются в vw как vh, когда изменяется ориентация.

Источник: http://caniuse.com/#feat=viewport-units

Ответ 5

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

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

Ответ 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));

Ответ 7

Есть ли что-то неправильное в следующем коде? Хотя я согласен, что медиа-запросы очень полезны, я хотел постоянно масштабировать размер шрифта некоторых элементов моей страницы, так как окно росло или уменьшалось. Этот код выглядит намного проще, чем другие 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();

});

Ответ 8

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

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