CSS MEDIA QUERIES - Part 6 of Frontend Development Series
Tags: css, webdev, frontend, responsive
Published: 2019-09-20 13:22:54

According to our guideline - [roadmap.sh/frontend](https://roadmap.sh/frontend), the next section on the frontend development series is **CSS Media Queries**.
Check out the full list of articles on the [Frontend Development Series](https://dev.to/dillionmegida/frontend-development-series-3004)

Table of Contents
- Intro to Media Queries
- Responsive Web Designs
- Syntax and Examples

# Intro
What are media queries in CSS?

Media queries are CSS techniques (introduced in CSS3) that specify styles which are more prioritized when the given conditions are met, i.e 
> **When the condition becomes true, all properties and values set in the query take the first consideration**

It uses the `@media` rule which contains style declarations.

Conditions and styles can also be applied to specific media types.

Some media types are:
`all` - The conditions and styles declared here apply to all media types.
`print` - Declarations made here apply only in print modes. This defines how the page would look in print previews and also the printed document.
`screen` - Declarations made here apply in the website window.

A major benefit of media queries is for
# Responsive Web Designs

Users make use of different mediums in viewing websites. It may be desktop, laptop, tablets, big-sized mobile phones or even small-sized mobile phones.

One user should not be deprived of the feel of your website because of the medium used. And, you wouldn't also want your user swiping left and right on a mobile phone because your webpage is only designed for larger screens.

Responsive Web Designs involves the use of HTML and CSS in determining what should be hidden, displayed, smaller in size, bigger in size (and so on) in different screen sizes. They define how the website should be displayed as the screen size changes.

# Syntax and examples
The most common use cases of media queries are for the `width` and `height` media features. [Check out more features](https://www.quackit.com/css/css_media_features.cfm)

The examples below would be focused on the `width` media feature, `screen` media type and `and/only` logical operators. [Check out more logical operators](https://css-tricks.com/logic-in-media-queries/)

### Syntax
The syntax for a media query is;
```css
/* .css file */
@media [logical operators and media types] ([media feature]: [value]) {
  selector {
    property: value;
  }
}
```

Example:
```html
<!-- .html file -->
<body>
  <div>
    <h1>Frontend Development Series</h1>
  <div>
</body>
```
```css
/* .css file */
h1 {
  font-size: 50px;
  color: pink;
}
div {
  width: 80%;
  height: 70%;
  background-color: black;
}

@media only screen and (max-width: 500px) {
  h1 {
    font-size: 20px;
  }
  div {
    width: 100%;
    background-color: purple;
  }
}
```
What our code above does is that;
- By default,
  - the `div` element has a height of 80% and width 70% of the parent (the parent here is the whole screen (`body` element)) with a background color of black
  - the `h1` element is of size 50px and pink in color.
- At a width of 500px or below (max-width: 500px)
  - the `div` element possesses a new width of 100% and background-color of purple. The height remains the same. Priorities were only given to the width and background-color property.
  - the `h1` element possesses a new font size of 20px but its color remains the same.

Result:
{% codepen https://codepen.io/Dillion/pen/ExYOdOr default-tab=css,result %}

You can play with the zoom levels of the codepen (1x, 0.5x, 0.25x) to see the changes. You can also play with the properties and values.

Many developers consider small screens before large screens
i.e declaring styles for smaller screens then using a condition like `(min-width: 300px)` for bigger screens. This is the most recommended approach towards responsive web designs but I advise that you use the approach that seems convenient for you.

This is a basic application of media queries. There are complex applications but with this understanding, you can explore in the field of Responsive Designs and also master the use of Media Queries.

For in-depth knowledge on Media Queries, Check out this article - [Using Media queries | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Targeting_media_types)

Feel free to ask questions or make contributions in the comment section or reach out to me on [twitter](https://twitter.com/iamdillion).

I also write articles on frontend web development on my personal website - [dillionmegida.com](https://dillionmegida.com).