Layout floats on different browsers?

Question

css

Gentlemen, such a question. I'm new, and I'm not very savvy in the madness of layout. I laid out the site, with grief in half. Placed media queries, Google Chrome flight is normal at different resolutions. I open it through Safari, the layout floats, it's not fatal, but it betrays my eyes. Okay, I corrected the styles for Safari, Chrome or Opera floats. All prefixes were placed by an autoprefixer. Further more, I found that a macbook with a resolution of over 2k loads adaptive styles for a 1280 monitor. Hysteria. What should I do, am I an idiot or what. I did not find a safari tool in the debugger, which, like in the Hill, shows at different resolutions. Yes, and I don’t have a poppy, how to deal with this? What to read, how to investigate such problems and solve them? Many thanks in advance to anyone who doesn't reply.

Answer 1

Mindfulness check:
In media queries
min-width: 1280px
or
max-width: 1280px
??

Answer 2

Use media to layout your design for browser latitudes.
But also keep in mind that the initial container for adaptive layout should be in percentage.
For example:
Accordingly, media :

@media screen only (max-width: 1600px){}
@media screen only (max-width: 1300px){}
@media screen only (max-width: 1000px){}
@media screen only (max-width: 700px){}
@media screen only (max-width: 400px){}

as for an example of use .. but in general, it’s better to attach layout elements that crawl, we will correct them for you

Answer 3

About macbook.
I'm mildly interested, is the meta viewport with width=device-width specified?
Worth reading about device pixel ratio
https://css-tricks.com/snippets/css/retina-display...