Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript that creates CSS media queries for responsive font sizing
function responsiveFontSizing( config ) {
var mediaQueryType = ( config && config.mediaQueryType ) || 'min-width';
var widthBegin = ( config && config.widthBegin && parseFloat( config.widthBegin, 10 ) ) || 17;
var widthEnd = ( config && config.widthEnd && parseFloat( config.widthEnd, 10 ) ) || 34;
var fontSizeBegin = ( config && config.fontSizeBegin && parseFloat( config.fontSizeBegin, 10 ) ) || 2;
var fontSizeEnd = ( config && config.fontSizeEnd && parseFloat( config.fontSizeEnd, 10 ) ) || 4;
var lineHeightBegin = ( config && config.lineHeightBegin && parseFloat( config.lineHeightBegin, 10 ) ) || 1.25;
var lineHeightEnd = ( config && config.lineHeightEnd && parseFloat( config.lineHeightEnd, 10 ) ) || 1.0625;
var selector = ( config && config.selector ) || 'h1';
var unit = ( config && config.unit ) || 'em';
var css = [];
for( var i = widthBegin; i <= widthEnd; i++ ) {
var fontSize = fontSizeBegin + ( fontSizeEnd - fontSizeBegin ) * ( i - widthBegin ) / ( widthEnd - widthBegin );
var lineHeight = lineHeightBegin + ( lineHeightEnd - lineHeightBegin ) / ( widthEnd - widthBegin ) * ( i - widthBegin );
css.push(
'@media only screen and (' + mediaQueryType + ': ' + i + unit + ') { ' +
selector + ' { font-size: ' + fontSize + unit + '; line-height: ' + lineHeight + '; }' +
' }'
);
}
return css; // array of strings
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment