CSS using media queries to add/remove classes
CSS Media Queries to Add/Remove Classes
In this article, we’ll learn how to use CSS media queries to add or remove classes. CSS media queries are a powerful tool for automatically applying different styles based on device characteristics and browser viewport size. By adding or removing classes, we can apply different styles based on different media query conditions, achieving adaptive layouts and styles.
Read more: CSS Tutorial
Adding Classes
Using media queries to add classes is a common technique for applying different styles based on device characteristics or viewport size. First, we need to define different media query conditions and define corresponding classes for each condition. Next, use class selectors on HTML elements to add the corresponding classes based on the results of the media query.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
/*Default style */
.box {
width: 200px;
height: 200px;
background-color: red;
}
/* Styles applied at viewport sizes less than 600px */
@media (max-width: 599px) {
.box {
background-color: blue;
}
}
/* Styles applied at viewport sizes greater than 1200px */
@media (min-width: 1200px) {
.box {
background-color: green;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In the example above, we define a class called box and apply different styles under different media queries. When the viewport width is less than 600px, the background color of box changes to blue; when the viewport width is greater than 1200px, the background color of box changes to green.
Removing Classes
In addition to adding classes, we can also remove them using media queries. This is useful when you need to hide or remove styles from certain elements. Similar to adding classes, we need to define different media query conditions and define corresponding classes for each condition. Then, we can use the remove method of the classList property to remove classes.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
/* Default styles */
.box {
width: 200px;
height: 200px;
background-color: red;
}
/* Styles applied at viewport sizes smaller than 600px */
@media (max-width: 599px) {
.hide {
display: none;
}
}
</style>
</head>
<body>
<div class="box hide"></div>
</body>
</html>
In the example above, we defined a hide class and hid it when the viewport width is less than 600px. Using the display: none style makes an element invisible. Here, we apply the hide class to the box element, which will be hidden when the viewport width is less than 600px.
If we want the box element to be visible under certain media query conditions, we can use JavaScript to add or remove the hide class. Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
/*Default style */
.box {
width: 200px;
height: 200px;
background-color: red;
}
/* Styles applied when the viewport size is less than 600px */
@media (max-width: 599px) {
.hide {
display: none;
}
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
var box = document.getElementById("box");
window.addEventListener("resize", function() {
if (window.innerWidth < 600) {
box.classList.add("hide");
} else {
box.classList.remove("hide");
}
});
</script>
</body>
</html>
In the above example, we use JavaScript to monitor window size changes. If the window width is less than 600px, we use the add method of classList to add the hide class, hiding the box element. If the window width is greater than or equal to 600px, we use the remove method of classList to remove the hide class and show the box element.
Summary
By using CSS media queries, we can automatically apply different styles based on device characteristics and viewport size. By adding or removing classes, we can achieve adaptive layouts and styles. In this article, we introduced how to use media queries to add and remove classes and provided some examples. We hope this will be helpful for you as you develop responsive web pages.