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