ブラウザウィンドウのサイズ変更イベント

Taobaoは、ブラウザウィンドウのイベントを使用するページ縮小プロセス中に中央の製品列を非表示にします

---

window.addEventListener（'resize'、function（）{}）

このイベントは、ブラウザウィンドウが変更されるたびにトリガーされます。window.innerWidthは、現在のブラウザのページ幅です。 

  window.addEventListener('resize',function(){
            console.log(window.innerWidth);
        })

 ドラッグブラウザウィンドウが変更されると、コンソール出力のブラウザ幅が変更されていることがわかります。

---

 この点で、淘宝網と同じ原理の事例を完成させることができます。

ウィンドウ幅が950未満の場合、中央の黄色のボックスを非表示にします

 <script>
        window.addEventListener('DOMContentLoaded',function(){
            var center=document.querySelector('.center')
        window.addEventListener('resize',function(){
           if(innerWidth< 950){
               center.style.display='none';
           }else{
               center.style.display='block';
           }
        })
    })
     </script>
     <div class="left"></div>
     <div class="center"></div>
     <div class="right"></div>
</body>

ブラウザのウィンドウ幅が951の場合でも、3つのボックスはすべて表示されます。

 ブラウザのウィンドウ幅が950未満の場合、中央のボックスが非表示になり、Taobao.comの効果が得られます。