I am currently working on a website and for making it responsive, I inspect it (in Google Chrome) and then change screen resolution and accordingly edit media queries.
The problem I am facing is, for ex. I wrote a media query for 1366x768 (according to the inspect and resolution change method), it works fine but when I actually view it on a device with 1366x768 resolution it differs. But if in that new device I inspect and make the screen resolution 1366x768 then it shows my edits. Why is this happening? How can I make edits for actual devices?
The key to develop your website as a responsive one is using "rem" instead of px, for almost everything as in for font sizes, padding, etc. And change the root font size for different media queries, and voila it's much easier!
I learned this the hard way but worth it!