Will a site with these media queries perform well?

Question

Adaptive design

I'm experimenting with media queries and I came up with the idea of ​​setting a new media query every 100px of width and every 50px of height, is that a good idea or not?

@media only screen and (min-width:1500px) and (max-width: 1600px), screen and (min-height: 850px) and (max-height: 900px){}

@media only screen and (min-width:1400px) and (max-width: 1500px), screen and (min-height: 800px) and (max-height: 850px){}

@media only screen and (min-width:1300px) and (max-width: 1400px), screen and (min-height: 750px) and (max-height: 800px){}

@media only screen and (min-width:1200px) and (max-width: 1300px), screen and (min-height: 700px) and (max-height: 750px){}

@media only screen and (min-width:1100px) and (max-width: 1200px), screen and (min-height: 700px) and (max-height: 750px){

}

@media only screen and (min-width:1000px) and (max-width: 1100px), screen and (min-height: 650px) and (max-height: 700px){}

@media only screen and (min-width:900px) and (max-width: 1000px), screen and (min-height: 600px) and (max-height: 650px){}

@media only screen and (min-width:800px) and (max-width: 900px), screen and (min-height: 600px) and (max-height: 650px){}

@media only screen and (min-width:700px) and (max-width: 800px), screen and (min-height: 600px) and (max-height: 650px){}

@media only screen and (min-width:600px) and (max-width: 700px), screen and (min-height: 550px) and (max-height: 600px){}

@media only screen and (min-width:500px) and (max-width: 600px), screen and (min-height: 500px) and (max-height: 550px){}

@media only screen and (min-width:400px) and (max-width: 500px), screen and (min-height: 450px) and (max-height: 500px){}

@media only screen and (min-width:300px) and (max-width: 400px), screen and (min-height: 400px) and (max-height: 450px){}

Answer 1

Only three or four breakpoints are made, depending on the project. Why pull every 100 pixels?