loading...
Cover image for CSS MEDIA QUERIES - Part 6 of Frontend Development Series

CSS MEDIA QUERIES - Part 6 of Frontend Development Series

dillionmegida profile image Dillion Megida ・3 min read

According to our guideline - 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

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

The examples below would be focused on the width media feature, screen media type and and/only logical operators. Check out more logical operators

Syntax

The syntax for a media query is;

/* .css file */
@media [logical operators and media types] ([media feature]: [value]) {
  selector {
    property: value;
  }
}

Example:

<!-- .html file -->
<body>
  <div>
    <h1>Frontend Development Series</h1>
  <div>
</body>
/* .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:

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

Feel free to ask questions or make contributions in the comment section or reach out to me on twitter.

I also write articles on frontend web development on my personal website - dillionmegida.com.

Posted on by:

dillionmegida profile

Dillion Megida

@dillionmegida

Front-end Developer | Technical Writer | Javascript Enthusiast | Graphics Designer

Discussion

pic
Editor guide