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.
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
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.
We can add multiple breakpoints for different screens like phone, tablet, desktop etc. Typically breakpoints are created at 5 points i.e.:
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.
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.
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.