每次调整窗口大小时增加元素大小

Question

我今天的问题是我有 12 个大小为 60px x 60px 的元素，我想在每次屏幕大小增加 10px 时使用 javascript 将大小增加 0.2。例如：screensize 600px 和 element size 60.2 x 60.2，screensize 610px 和 element size 60.4 x 60.4 等等。它会增加这样的东西：

var circle_data={
        container: document.querySelector(".container"),
        classname: "astro-item",
        nb_elem: 12,
        elem_size: 60,
    };
    var screenSize = window.innerWidth;
    circle_data.elem_size += 0.2;

问题是我不知道每次屏幕尺寸增加10px时如何增加

感谢您的帮助！！

所以你的答案是我尝试过的代码，但它不起作用，可能是因为我已经有一个设置元素大小的函数，这是完整的脚本：

function circle_container(objdata) {
            var circle_dim=objdata.container.getBoundingClientRect();
            var rayon=Math.round(circle_dim.width/2 - objdata.elem_size/2);
            var center_x=rayon;
            var center_y=rayon;

            if (objdata.rayon) rayon*=objdata.rayon/100;

            for(var i=0;i<objdata.nb_elem;i++) {
                var new_elem=objdata.container.querySelector("."+objdata.classname+i);
                if (!new_elem) {
                    var new_elem=document.createElement("button");
                    new_elem.className="astro-item"+" "+objdata.classname+i;
                    var new_img=document.createElement("img");
                    new_img.src = astroList[i].icon;
                }

                new_elem.style.position="absolute";
                new_elem.style.width=objdata.elem_size+"px";
                new_elem.style.height=objdata.elem_size+"px";

                new_elem.style.top=Math.round( (center_y - rayon * Math.cos(i*(2*Math.PI)/objdata.nb_elem)))+"px";
                new_elem.style.left=Math.round( (center_x + rayon * Math.sin(i*(2*Math.PI)/objdata.nb_elem)))+"px";

                objdata.container.appendChild(new_elem);
                new_elem.appendChild(new_img);
            }
        }

        var circle_data={
            container: document.querySelector(".container"),
            classname: "astro-item",
            nb_elem: 12,
            elem_size: 60,
        };
        function onResize(e) {
            var screenSize = e.target.outerWidth;       
            var width = (screenSize - (screenSize %  100) + (((screenSize + 10) %  100)/10 *2))/10;
            var items = document.querySelectorAll('.astro-item');
            for(var i = 0; i < items.length; i++) {
                items[i].innerHTML  = 'width: ' + screenSize + ' size: ' + width ;
            }

        }       
        circle_container(circle_data);
        addEvent(window,"resize",function() { 
            circle_container(circle_data); 
            onresize(); 
        });

此功能的目的是创建 12 个圆形对齐的按钮（就像一个轮子）并且完全响应，这就是为什么我需要它们在屏幕变大时变大。非常感谢！

Answer 1

使用纯 javascript 绑定事件 onresize 并根据窗口宽度设置大小。屏幕尺寸每增加10px，尺寸增加0.2：

window.addEventListener("resize", onresize);

var onresize = function(e) {

       var width = e.target.outerWidth;       
       circle_data.elem_size = (width - (width %  100) + (((width + 10) %  
      100)/10 *2))/10;
}

工作示例：

（全屏打开）

*已针对最大最小限制进行了编辑

 var min = 500; //min width in pixel
var max= 700;  //max width in pixel

window.addEventListener("resize", onresize);

var onresize = function(e) {

       var width = e.target.outerWidth;       
       var s = (width - (width %  100) + (((width + 10) %  100)/10 *2))/10

     if(width <=max && width >=min){
        //change size here
         document.getElementById('s').innerHTML  = 'width: ' + width + ' size: ' + s ;
    }
   


}

<span id='s'> </span>