ウィンドウがサイズ変更されるたびに要素サイズを増やす

Question

今日私の問題は、サイズが60px x 60pxの12個の要素があり、毎回0.2pxのサイズを10pxのサイズをJavaで増やす場合です。たとえば、スクリーンサイズ600ピクセル、要素サイズ60.2 x 60.2、スクリーンサイズ610ピクセル、要素サイズ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をバインドし、ウィンドウの幅に基づいてサイズを設定します。

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; 
} 

実施例：サイズが0.2毎回10pxの画面サイズの増加増やす最大最小の限界のために編集

*

（フルスクリーンにオープン）を

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>