How to write media queries correctly?

Question

css

Given: site layout at 3 resolutions 320рх, 768рх и 1200рх- . I am making mobile first.
At the moment, the variables for media queries are:

@tablet:  ~"screen and (min-width: 768px)";
@desktop: ~"screen and (min-width: 1200px)";

Accordingly, first I prescribe the default styles, then for @tabletand @desktop. Everything works fine for mobile and desktop.
The problem is with the tablet, there are no problems in the vertical position, but when rotated to the horizontal, the content is displayed as for the desktop, although the resolution of the tablet is 768x1024.
Please tell me how to write media queries correctly to solve the problem.
inb4: I've already read a lot of material about media queries, but either the materials are incomprehensible, or it's my business, since the mess in my head has only become thicker.

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/M... read about orientation