JSFiddle - React, Tailwind, and code Playground

by dezignas

HTML

<div class="super">
    
    <p>this is some text I want to rezise</p>
    
    
    
</div>

CSS

.super {
    background:red;
    width:400px;
    height:400px;
    
    
    
} 


.super p {
    font-size:20px;
    
    
}

JavaScript

function somefunction (thewidth, sizeby ) {
var square = $(thewidth);
var width = square.width ();
var height = square.height ();
var ratio = width/height;
square.width(sizeby);
var width = square.width ();
square.height(width * ratio);
var height = square.height();
}


 var my = $(".super");

var my_heightas = $(window).width(); 
    
somefunction (my,my_heightas);


$(window).resize(function(){
 var my = $(".super");

var my_heightas = $(window).width(); 
    
somefunction (my,my_heightas);
	
	});



function changefont (thewidth, theparent, sizeby ) {
var square = $(thewidth);
var fontsize = square.css("font-size");
var parent = $(theparent);    
var heightp = parent.height();
var ratio = heightp/fontsize;
    
var width = square.width ();
square.height(width * ratio);
var height = square.height();
}


var fonts =  $(".super p").css("font-size");