JSFiddle - React, Tailwind, and code Playground
CSS
body {
overflow: hidden;
}
div {
position: absolute;
font-family: Arial;
color: #fff;
background: #5aa348;
}
JavaScript
var docWidth, docHeight, docRatio, div = document.getElementsByTagName('div')[0];
onresize = function()
{
docWidth = document.documentElement.clientWidth;
docHeight = document.documentElement.clientHeight;
// ширина и высота вьюпорта
docRatio = docWidth / docHeight;
// соотношение сторон вьюпорта
fullScreenProportionalElem(div, 1920, 1080); // элемент, ширина, высота
resizeFont(div, 1920, 1080, 200); // элемент, ширина, высота, размер шрифта
// размер шрифта зависит от выставленной ширины и высоты
}
function fullScreenProportionalElem(elem, 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 = '0px';
// высота вьюпорта больше чем высота элемента
// ширину элемента приравниваем к ширине вьюпорта, высоту вычисляем
// центрируем элемент по высоте
}
else if (docRatio > ratio)
{
elem.style.width = Math.round(docHeight * ratio) + 'px';
elem.style.height = docHeight + 'px';
elem.style.top = '0px';
elem.style.left = Math.round(docWidth / 2 - elem.offsetWidth / 2) + 'px';
// ширина вьюпорта больше чем ширина элемента
// высоту элемента приравниваем к высоте вьюпорта, ширину вычисляем
// центрируем элемент по ширине
}
else
{
elem.style.width = docWidth + 'px';
elem.style.height = docHeight + 'px';
elem.style.top = '0px';
elem.style.left = '0px';
// соотношение сторон вьюпорта равно соотношению сторон элемента
// приравниваем стороны элемента к сторонам вьюпорта
// обнуляем значения top и left
}
}
function resizeFont(elem, width, height, size)
{
var ratio = width / height;
// соотношение...