Created
May 17, 2016 07:48
-
-
Save s-melnikov/bee4c831cc36923b3ef0cd6d07e9f7af to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment