Media query
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.
We can add a breakpoint where certain parts of the design will behave
differently on each side of the breakpoint.
Always designing for mobile before designing for desktop or any other
device
This will make the page display faster on smaller devices.
There are tons of screens and devices with different heights and width,
so it is hard to create an exact breakpoint for each device. To keep things
simple you could target five groups
Media Query Basics
The simplest media query syntax looks like this:
@media media-type and (media-feature-rule) { /* CSS rules go here */ }
It consists of:
•A media type, which tells the browser what kind of media this code is for
(e.g. print, or screen).
•A media expression, which is a rule, or test that must be passed for the
contained CSS to be applied.
•A set of CSS rules that will be applied if the test passes and the media
type is correct.
Media types
The possible types of media you can specify are:
•all
•print
•screen