Help for media only

Hello, I wonder if you could possibly help me with a problem I am having with the implementation of Media Only screens.

I should mention that I am a novice programmer and this is the first time I have developed such a large piece of code.

I'm currently working on the new website for my company, and I've completed the homepage. I'm now focusing on making it responsive to mobile devices.

I have created some Media Only elements in the CSS file for the homepage, but these are not immediately applied to mobile devices.I should also point out that I use FireFox Developer Edition, which has a mode for displaying pages as mobile.

I have created media-only screens and searched online for the dimensions of most mobile devices, but I'm afraid I may have the wrong dimensions. Would you be so kind as to assist me?

Perhaps someone with experience in HTML and CSS could kindly provide the correct dimensions?

My Code

media only screen and (min-width: 360px) and (max-width: 393px){}
@media only screen and (min-width: 412px) and (max-width: 428px){}
@media (min-width: 576px) and (max-width: 768px) {}