Media Query Crash Course

Media query is an amazing tool in CSS3 that improves the responsiveness of a website. You may be wondering, do I really need it, when there are a lot of CSS frameworks out there that make a website responsive very faster? Yes, but the functionalities are totally different.

CSS Frameworks such as Bootstrap, Bulma and so on are style framework that leverages media queries while Media query allows us to create rules of CSS properties based on various device type.

For instance, there are times the font-size for an element is 45pixels at the desktop view. Obviously, the text will be too large at the phone view. So, it’s advisable you reduce the size. How do you reduce the size? Thankfully, media query helps to achieve that.

Media query Syntax:

@media media-type and (media-expression) {

    /* CSS rules go here */
}

Example 1:

How to change the font-size of an element when the browser’s width is 600px wide or less.

@media screen and (max-width:600px){
    h2 {
        font-size: 14px;
    }
}

Example 2:

How to change the font-size and color of an element when the browser’s width is more than 600px.

@media screen and (min-width:600px) {
    p {
        font-size: 40px;
        color: #333333;
    }
}

Example 3:

How to change the body text color to blue if the screen is exactly 400pixels.

@media screen and (width:400px) {
    body{
        color: blue;
    }

}

If you noticed, I made use of only 1 media type (screen) and 3 different media-expression(max-width, min-width, & width). Those are the most commonly used, the complete list is here, you can read up on it. Thanks.