如何根据不同的设备调整svg的大小？

@media screen and (max-width: 768px) {
  svg {
    width: 100px;
    height: 100px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  svg {
    width: 200px;
    height: 200px;
  }
}

@media screen and (min-width: 1025px) {
  svg {
    width: 300px;
    height: 300px;
  }
}

var svg = document.querySelector('svg');
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

if (screenWidth < 768) {
  svg.setAttribute('width', '100');
  svg.setAttribute('height', '100');
} else if (screenWidth >= 768 && screenWidth < 1024) {
  svg.setAttribute('width', '200');
  svg.setAttribute('height', '200');
} else {
  svg.setAttribute('width', '300');
  svg.setAttribute('height', '300');
}