jquery를 이용한 반응형 정사각형 만들기

<!-- html 태그 -->
<div class="box"></div>


<!-- script -->
$(document).ready(function(){
    var squareX_1920 = 500; // 해상도 1920 에서의 정사각형 가로 길이 500px 
    var resizeX; // 해상도 변화에 따라 반응될 정사각형 가로 길이
    const resolution_1920 = 1920; // 해상도 1920px

    
    boxStyle();
    $(window).resize(function(){
      boxStyle();
    })
    
    // 해상도 변화에 따른 정사각형 반응형 길이 구하기
    function responsive_square(resizeX){
      return resizeX / resolution_1920 * squareX_1920;
    }
    function widthValue(){
      var browser_width = $(window).width(); // 현재 브라우저 가로 길이 
      var squareX_responsive = responsive_square(browser_width); // 해상도 변화에 따라 정사각형 가로 길이가 반응되어 나온 결과값  
      return squareX_responsive;
    }
    function boxStyle(){
      $('.box').css({
        width: widthValue(),
        height: widthValue()
      });
    };
  });