How to solve the problem with responsive design?

Question

css

All my CSS media queries are written like this:

@media only screen and (max-width:ширина экрана в px) {
  .to-top {
    display: none;
  }
}

Everything looks good in the browser at all sizes.
But, when I log in through a phone, for example, Nexus 5 (which has a screen resolution of 1920px by 1080px) , I see changes only at least 1080px , from all the CSS that I have written .
This is of course logical. It turns out that my code counts the actual pixels of each screen (my monitor is 1920px by 1080px and my Nexus 5 monitor is 1920px by 1080px) , but I want my site to be displayed on the Nexus 5 as for a small screen, that is, a full mobile version.
I already have it set for all resolutions, it’s just that I probably need to replace something so that it doesn’t rely on pixels, but on the specific screen size of the device.
Explain to me how and what to do.

Answer 1

I think this meta tag will help you now:
And read a little about it and its parameters, it will take quite a bit of time and will help you in the future.

Answer 2

max-device-width specify
and read this

Answer 3

But when accessing through a phone, such as a Nexus 5 (which has a screen resolution of 1920px by 1080px)

You are forgetting to take into account the pixel density (referred to as device pixel aspect ratio in css). Your Nexus has it equal to 3:
That is, on your device the page is rendered at a resolution of 360x567. From here, your problems with targeting media queries are possible.
And here's how to target the seventh nexus: https://gist.github.com/afj176/6357322

Answer 4

@media (max-width:ширина экрана в px)
what if you just leave it like that?