Media query was introduced in CSS3. The feature uses the @media rule which helps us to include certain CSS properties only if some conditions are met.
Breakpoint
Firstly, we can start with the breakpoints. Even if they’re responsive, the web-pages may, sometimes, not look very good on small screens. To solve this issue, Media Query helps us add breakpoints that will make the elements behave differently for different screens.
For instance, if you put a breakpoint at, say, 700px The elements design will automatically shift at screens less and more than 700px
Mobile First
It is a standard convention to design the page for mobile first and then for desktop or any other device. Thus, instead of the styles changing at widths less than 768px, we should design them to change at widths more than 768px.
Multiple Breakpoints
We can add multiple breakpoints for different screens like phone, tablet, desktop etc. Typically breakpoints are created at 5 points i.e.:
600px (min-width)
600px (max-width)
768px
992px
1200px
Portrait / Landscape
The browser can have two different orientations – Portrait or Landscape. The portrait is the orientation where, conventionally, height is more than the width and vice-versa for landscape.
Media queries can help us change the layout based on these orientations. You can set some CSS properties that will only work for the Landscape orientation or Portrait orientation.
Hide Elements
We can also hide some elements on different screens based on their size. This helps us to organize the elements better on smaller screens where they can be too much after a certain number.
Font Size
The text on the web pages also needs to be handled for its font-size on different screens. This ensures the readability of the text by keeping it just the right size as per the screen.