Media Queries are things that allows us to have responsive design in our websites. To allow this we must include the following meta tag in the HTML head:
<`meta name="viewport" content="width=device-width, initial-scale=1.0">Syntax
To use media queries with the following syntax:
@media <media type> <and/or operators> (condition: breakpoint) {
// CSS Rules
}For example, the following is a starting point for mobile-first design. This is commonly used because it is often the smallest view-port we’ll design for, and making things bigger as we expand the screen is easier than the other way around.
@media screen and (min-width: 480px) {
}This code means that all our styles prior to a screen width of 480px will apply. Once a screen is > 480px, whatever styles we declare inside the @media selector will take over.
Common conditions:
- min-width: 480px
- orientation: landscape
- min-aspect-ratio: 4/3