JSFiddle - React, Tailwind, and code Playground

by emilcieslar

HTML

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<div class="calibrate">
    <button>Calibrate!</button>
</div>

CSS

.calibrate {
    width: 100%;
    background: orange;
}

    .calibrate button {
        width: 20%;
        height: 10%;
        background: white;
        position: absolute;
        top: 5%;
        left: 5%;
    }

JavaScript

$(window).resize(function() {
    var h = $(this).height();
	$('.calibrate').height(h);
});

var calibratedW = 0;

$('.calibrate button').click(function() {
    calibratedW = $(window).width();
    addMediaQueries(calibratedW);
});
                 
$(window).resize();

function addMediaQueries(calibratedWidth) {
    // Add media queries with changed values based on calibration
    $('body').append("<style type='text/css'>@media (min-width: 4.2cm) and (max-width: 5.2cm) and (min-height: 4cm) and (max-height: 5cm){ .medium { display: block; } }</style>");
    
}

function calibrate(origSize, calibratedWidth) {
    return calibratedWidth*origSize/5;
}