calculative responsive layout width/12, height/12

HTML

<body>
    <button class="button">Click here</button><br>
</body>

CSS

.box
{
    display:none;
    display:block;
    margin:3px;
    background:green;
    float: left;
    
}

JavaScript

$(function(){

    var width=$(window).width();
    var span12= width/12;
    var height=$(window).height();
    var spanheight=height/12;
       
    $('.button').click(function(){
        for(var count=0; count<12; count++){
            $('body').append('<div class="box"></div>');
        }
        $('.box').css("height",spanheight);
        $('.box').css("width",span12);
    });
   });