Media query is a CSS technique introduced in CSS3.
It uses the @media
rule to include a block of CSS properties only if a
certain condition is true.
Earlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen.
Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.