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
divelement has a height of 80% and width 70% of the parent (the parent here is the whole screen (bodyelement)) with a background color of black - the
h1element is of size 50px and pink in color.
- the
- At a width of 500px or below (max-width: 500px)
- the
divelement 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
h1element possesses a new font size of 20px but its color remains the same.
- the
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.
Oldest comments (0)