Browser window resizing event

Taobao will hide the middle product column during the page reduction process, which uses the event of the browser window

---

window.addEventListener( 'resize', function() { })

This event is triggered whenever the browser window changes. window.innerWidth is the page width of the current browser. 

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

 It can be seen that when the drag browser window changes, the browser width of the console output has been changing

---

 In this regard, we can complete a case of the same principle of Taobao.

We hide the middle yellow box when its window width is less than 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>

When the browser window width is 951, all three boxes are still displayed

 When the browser window width is less than 950, the middle box is hidden, achieving the effect of Taobao.com