Responsive typography Hack

Media query hack

by jitendravyas

HTML

<textarea style="width:100%;height:30em;"></textarea>

JavaScript

function generateQueries(windowSize, fontSize) {
    var result = '';
    var selector = 'body';
    
    var widthStep = (windowSize.end - windowSize.start) /  (fontSize.end - fontSize.start);
    
    for (var i = fontSize.start, j = 0; i < fontSize.end; i++, j++) {
        var targetWidth = windowSize.start + Math.round(widthStep * i);
        
        result += '@media all and (min-width: ' + targetWidth + 'px) {' + selector + '{font-size: ' + i + '%;}}\n'; 
    }
    
    return result;
}

document.getElementsByTagName('textarea')[0].value = generateQueries({start: 0, end: 1025}, {start: 65, end: 130});