s-melnikov
5/17/2016 - 7:48 AM

example.js

var 
  elements = document.querySelectorAll('.s-box'),
  docWidth, 
  docHeight, 
  docRatio;

elements = Array.prototype.slice.call(elements);

function onresize() {
  // ширина и высота документа
  docWidth = document.body.clientWidth;
  docHeight = document.body.clientHeight;
  // соотношение сторон документа
  docRatio = docWidth / docHeight;

  elements.forEach(function(element) {
    // размер шрифта зависит от выставленной ширины и высоты
    fullScreenProportionalElem(element, 1920, 965); // элемент, ширина, высота
    resizeFont(element, 1920, 965, 200); // элемент, ширина, высота, размер шрифта
  });
}

function fullScreenProportionalElem(element, width, height) {
  var ratio = width / height;
  // соотношение сторон элемента
  if (docRatio < ratio) {
    // высота вьюпорта больше чем высота элемента
    // ширину элемента приравниваем к ширине вьюпорта, высоту вычисляем, центрируем элемент по высоте
    elem.style.width = docWidth + 'px';
    elem.style.height = Math.round(docWidth / ratio) + 'px';
    elem.style.top = Math.round(docHeight / 2 - elem.offsetHeight / 2) + 'px';
    elem.style.left = '0';
  } else if (docRatio > ratio) {
    // ширина вьюпорта больше чем ширина элемента
    // высоту элемента приравниваем к высоте вьюпорта, ширину вычисляем, центрируем элемент по ширине
    elem.style.width = Math.round(docHeight * ratio) + 'px';
    elem.style.height = docHeight + 'px';
    elem.style.top = '0';
    elem.style.left = Math.round(docWidth / 2 - elem.offsetWidth / 2) + 'px';
  } else {
    // соотношение сторон вьюпорта равно соотношению сторон элемента
    // приравниваем стороны элемента к сторонам вьюпорта, обнуляем значения top и left
    elem.style.width = docWidth + 'px';
    elem.style.height = docHeight + 'px';
    elem.style.top = '0';
    elem.style.left = '0';
  }
}

function resizeFont(element, width, height, size) {
  var ratio = width / height;
  // соотношение сторон элемента
  if (docRatio < ratio) elem.style.fontSize = height * size / 33855 + 'vw';
  else if (docRatio > ratio) elem.style.fontSize = width * size / 33684 + 'vh'; 
}

onresize();