Skip to content

Instantly share code, notes, and snippets.

@pash90

pash90/dynamic-fonts.html

Created January 18, 2017 08:42
Show Gist options
  • Save pash90/b0bad3567fa42363c930af03ddf99b83 to your computer and use it in GitHub Desktop.
Save pash90/b0bad3567fa42363c930af03ddf99b83 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dynamic-fonts.html
<html>
<body>
<p id="demo-text">The font size is being changed propertionally to the window width. The current size is <span id="font-size"></span></p>
<script>
var fontSizes = {
mobile: 12,
tablet: 14,
desktop: 16
};
var screenSizes = {
mobile: 320,
tablet: 768,
desktop: 1024
};
// Variables that store calculated components
var A = (((fontSizes.desktop - fontSizes.tablet) / (screenSizes.desktop - screenSizes.tablet)) - ((fontSizes.tablet - fontSizes.mobile) / (screenSizes.tablet - screenSizes.mobile))) / (screenSizes.desktop - screenSizes.mobile),
B = ((fontSizes.desktop - fontSizes.tablet) / (screenSizes.desktop - screenSizes.tablet)) - (A * (screenSizes.desktop + screenSizes.tablet)),
C = fontSizes.desktop - (B * screenSizes.desktop) - (A * screenSizes.desktop * screenSizes.desktop);
var sizeExtension = 'px';
window.onresize = function(event) {
var screenWidth = window.innerWidth;
var newFontSize = Math.floor((A * screenWidth * screenWidth) + (B * screenWidth) + C);
document.getElementById('demo-text').style.fontSize = newFontSize;
document.getElementById('font-size').innerHTML = newFontSize;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment