Skip to content

Instantly share code, notes, and snippets.

@euharrison

euharrison/gist:2e25f196dbad16ee8efb

Created August 3, 2015 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save euharrison/2e25f196dbad16ee8efb to your computer and use it in GitHub Desktop.
Save euharrison/2e25f196dbad16ee8efb to your computer and use it in GitHub Desktop.
Download ZIP
font-size calculator
Raw
gistfile1.txt
<!doctype html>
</html>
<head>
<title>Calculadora de font-size responsivo</title>
<style type="text/css">
body {
font-family: sans-serif;
max-width: 700px;
margin: 30px auto;
text-align: left;
}
</style>
</head>
<body>
<h1>Calculadora de font-size responsivo</h1>
<p>Edite o source para calcular com valores personalizados</p>
<br>
<h2>Dados utilizados</h2>
<pre>
var breakpoints = [320, 768, 1360, 1920];
var sizes = [ 16, 18, 22, 30];
</pre>
<h2>CSS</h2>
<pre><div id="output"></div></pre>
<script>
var breakpoints = [320, 768, 1360, 1920];
var sizes = [ 16, 18, 22, 30];
var html = '';
for (var i = 0; i < breakpoints.length-1; i++) {
vw = breakpoints[i];
// y = ax + b
// font-size = a(vw) + b
var x1 = breakpoints[i];
var x2 = breakpoints[i+1];
var y1 = sizes[i];
var y2 = sizes[i+1];
var a = (y2-y1) / (x2-x1);
var b = (x2*y1 - x1*y2) / (x2 - x1);
//multiplicar por 100 pois a unidade vw usa valores de 0-100, ao invés de 0-1
html += 'calc('+(a*100)+'vw + '+b+'px) \n';
};
document.getElementById('output').innerHTML = html;
console.log(html);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment