Responsive HTML , CSS and Canvas

Good day everyone! Hope everyone is safe and Healthy. I have a project (for learning purposes). I have 5 gauges, each on a canvas. The script to draw the gauges is already included and working. when you open up Page 1 HTML will see the gauges and needles move to their positions. where I'm having problems is in implementing on the css file the @media only screen and (max-width: 480px). I need for the gauges to resize from width: 200px , height: 200px , to width:100px height: 100px when the screen is smaller then 480 px. The reality is I want to learn how to do it and implement it with other screen sizes too. The gauges are in the canvas tag only because I chose too, maybe there are other easier ways to do this. please feel free to comment and modify to your knowledge! I'm open for suggestions!