如何针对不同大小的设备调整gridview的大小

/* 小屏幕设备 */
@media screen and (max-width: 768px) {
  .grid-view {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 中屏幕设备 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .grid-view {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 大屏幕设备 */
@media screen and (min-width: 1025px) {
  .grid-view {
    grid-template-columns: repeat(4, 1fr);
  }
}

window.addEventListener('resize', function() {
  var screenWidth = window.innerWidth;
  var gridView = document.querySelector('.grid-view');
  
  if (screenWidth <= 768) {
    gridView.style.gridTemplateColumns = 'repeat(2, 1fr)';
  } else if (screenWidth > 768 && screenWidth <= 1024) {
    gridView.style.gridTemplateColumns = 'repeat(3, 1fr)';
  } else {
    gridView.style.gridTemplateColumns = 'repeat(4, 1fr)';
  }
});