(function($) { $(document).ready(function() {

var ratio = Math.sqrt(2);
var vw = document.documentElement.clientWidth;
var width = /* 595 */ vw-20;
var edge = 0.25*72

$(".container").css({
    width: width,
    height: width*ratio,
    padding: edge,
});
$(".page").css({
    width: width-(edge*2),
    height: (width*ratio)-(edge*2),
});

$(".attrBlock").css({
    width: (54*width)/pxWidth,
    height: (64*width)/pxWidth,
    left: (22*width)/pxWidth,
});
$(".attrBg").css({
    width: $(".attrBlock").width(),
    height: $(".attrBlock").height(),
});
$(".attrTxt").css({
    width: $(".attrBlock").width(),
});

$(".attrBlock.cha").css({
    top: (484*width)/pxWidth,
});
$(".attrTxt").css({
    top: (6*width)/pxWidth,
    "font-size": (10*width)/pxWidth,
});


interact('.draggable').draggable();

});
})(jQuery);

@@ -184,29 +184,31 @@
 ).css(%7B%0A    
+%22
 width
+%22
 : width,%0A   
@@ -208,22 +208,24 @@
 th,%0A    
+%22
 height
+%22
 : width*
@@ -239,15 +239,17 @@
     
+%22
 padding
+%22
 : ed
@@ -277,21 +277,23 @@
 s(%7B%0A    
+%22
 width
+%22
 : width-
@@ -306,22 +306,24 @@
 2),%0A    
+%22
 height
+%22
 : (width
@@ -371,21 +371,23 @@
 s(%7B%0A    
+%22
 width
+%22
 : (54*wi
@@ -404,22 +404,24 @@
 th,%0A    
+%22
 height
+%22
 : (64*wi
@@ -442,12 +442,14 @@
     
+%22
 left
+%22
 : (2
@@ -485,37 +485,39 @@
 rBg%22).css(%7B%0A    
+%22
 width
+%22
 : $(%22.attrBlock%22
@@ -531,22 +531,24 @@
 (),%0A    
+%22
 height
+%22
 : $(%22.at
@@ -595,21 +595,23 @@
 s(%7B%0A    
+%22
 width
+%22
 : $(%22.at
@@ -664,19 +664,21 @@
 s(%7B%0A    
+%22
 top
+%22
 : (484*w
@@ -720,19 +720,21 @@
 s(%7B%0A    
+%22
 top
+%22
 : (6*wid

Update functions.js