Learning CSS with Less - Media queries
Learning CSS with Less - Media queries
"Learning CSS with Less" technical tutorial series gets better and better with each article. Each part of this series comes as a new puzzle piece from a whole - and we really feel that the passion and dedication with which Andrei formed this course are the keys that will make this puzzle a successful one in the end.
We created the Technical Blog section out of a desire to share the knowledge gathered over the years of hard work by senior developers from our community - helping you become one of the top 1% of software developers in the world.
Now... Let's discover the next part of "Learning CSS with Less". Enjoy!
- Topics of discussion
- Media queries in action
1. Topics of discussion
In this tutorial, we are going to talk about media queries and how to use them. So, let's have some fun.
2. Media queries in action
Web design seems easy...until you realize that you kinda have to make sure the webpage looks nice on multiple devices with varying screen sizes. I mean sure, you can potentially make separate websites that display on mobile devices whenever someone visits your website from such devices.
But there will be scenarios where someone will visit your website from older laptops that do not support high resolutions. And you will want to make sure that the web app looks good on those devices as well.
Luckily, there is a solution to this problem in the form of media queries. Media queries are used to apply some CSS instructions only when certain conditions are met. The conditions usually refer to the width of the viewport, since that's the main factor that determines how much can be displayed on a website. Height is not all that important since people are used to scrolling down for more information.
Media queries can be used in plain CSS as well, they are not limited to Less. A media query looks like this:
@media (condition)And since the best way to understand this is by example, let's write us some media queries. First off, let's write some HTML code:
Some text here
And now, let's take a look at the CSS code for this:
.media-query-container {
font-size: 30px;
.media-query-item {
font-size: 0.90em;
@media (max-width: 991px) {
font-size: 0.95em;
}
@media (min-width: 577px) and (max-width: 768px) {
font-size: 1em;
}
@media (max-width: 576px) {
font-size: 1.1em;
}
}
}As you can see, you can have multiple conditions for the same media query. In order to test this, you need to resize your window so that it has a lower width. This can be done by pressing F12 in your browser. If you are using Chrome, a new area should appear, either on the side, bottom, or as a separate window. Once that separate area, called the Developer Tools appears, on it you should see a button with 3 dots placed vertically. Click on it and select Dock to Right. Once that is done, you can drag that window to the left in order to make it occupy more space. And as the main window gets smaller, you'll notice the font changes.
Let's take a look at how the code above looks in vanilla CSS:
.media-query-container {
font-size: 30px;
}
.media-query-container .media-query-item {
font-size: 0.9em;
}
@media (max-width: 991px) {
.media-query-container .media-query-item {
font-size: 0.95em;
}
}
@media (min-width: 577px) and (max-width: 768px) {
.media-query-container .media-query-item {
font-size: 1em;
}
}
@media (max-width: 576px) {
.media-query-container .media-query-item {
font-size: 1.1em;
}
}As you can see, there are also 3 media queries created once you compile the CSS. Note that in this example, there is only one CSS class defined in each media query but you can define as many as you want. Less is smart enough to group all the instructions for the same media query under the same rule when compiling, which should prevent any duplicates.
Of course, you can use the syntax from vanilla CSS in Less CSS as well, but I would highly recommend that you place the media query for each required element like I have did. Creating a separate media query that encapsulates all the CSS instructions for all possible elements is way harder to maintain and understand. But by placing media queries on each element, when someone reads the code, it will allow him to see exactly how this element behaves without having to go through all the lines of code in the file.
Before we finish, let's talk about some useful cutoff points. When developing web applications, responsive design is a must. However, since there are so many devices, it may become difficult to figure out where some changes should occur. Luckily, there are other people who figured this out for us. I usually refer to Bootstrap for these cutoff points.
In Bootstrap 3, you had 3 cutoff points:
- @media (min-width: 768px) (which can be written as @media(max-width: 767px) )
- @media (min-width: 992px) (which can be written as @media(max-width: 991px) )
- @media (min-width: 1200px) (which can be written as @media(max-width: 1199px) )
Bootstrap 4 just added a new one for the lower end of the resolutions:
- @media (min-width: 576px) (which can be written as @media(max-width: 575px) )
Generally speaking, you can use both single and multiple conditions with these widths. If you know how to write code, a single condition should be enough. If you want to be sure, you can use both a min-width and max-width in your media queries.
And that about covers it for this tutorial. In the next one, we will take a look at certain language extensions such as mixins and variables that Less offers in more detail. See you then.