Introduction

Media Queries are vital to Responsive designs and provide a way to update/override styles based on specific rules. Let's look at some examples where we will use media queries.

1. Hiding navigation menu for mobile devices and showing hamburger menu.

2. Checking for user default theme set to browser.

3. Checking whether the device supports Hover functionality or not.

Before jumping to Media queries, We need to understand what is Viewport meta tag and how this will be useful for creating responsive web designs.

Viewport Meta tag

<meta name="viewport" content="width=device-width,initial-scale=1" />

Viewport tag will be useful to control the rendering of the content on mobile devices. Usually, mobile devices render the content more than the original device width. due to this, we cannot apply media queries to mobile devices. To handle this problem we will use the viewport meta tag in the markdown.

We understood about the viewport tag, Now we will jump into media queries.

Media Queries syntax

let's see the general syntax of the media query.

@media media-type and (media-rule){
    /* Styles go here..*/
}

Width and Height

min-width

@media (min-width: 600px){
    /* Your styles go here...*/
}

Here we didn't specify the media type, so it will apply to all the media types. This media query will apply styles if the screen width is 600px or larger.

In this example, We are declaring styles for the small screens first and then using media queries we override the styles for larger screens. So this approach is also known as Mobile first approach.

max-width

@media (max-width: 600px){
    /* Your styles go here...*/
}

This media query will apply styles if the screen width is 600px or lesser.

In this example, We are designing the web/Desktop layout first and later we are overriding the styles for mobile devices using media queries. This approach is known as Desktop first approach.

We can also combine the rules in the media queries, will see some examples

combined queries

@media (min-width: 600px) and (max-width: 1100px){
    /* Your styles go here...*/
}

This query will apply styles from 600px to 900px width.

Let's explore some more media queries.

Orientation

Portrait

@media (orientation: portrait){
    /* Your styles go here...*/
}

This query will only apply the styles when the device is in portrait mode.

Landscape

@media (orientation: landscape){
    /* Your styles go here...*/
}

This query will only apply the styles if the device is in portrait mode.

Print

@media print {
    /* Your styles go here...*/
}

This query will apply styles only while printing the webpage. These styles will not apply when the webpage is rendered on the browser.

Pointer Devices

hover

@media (hover: hover){
    /* Your styles go here...*/
}

This query will check whether the device supports the hover functionality and apply the styles if it is supported.

Bonus: How to choose the correct Breakpoint

Some people will choose breakpoints based on device width, for example, iPad has 670px width and iPhone has 375px width. So they will adjust the site based on these two devices. This approach has some cons, We cannot cover more devices. If any device has 400 or 450px then there may be a chance of breaking our design.

The best way to choose the breakpoint is to consider the point where you feel your design is breaking. We need to play with our browser dev tools to find the correct point where our design is failing and choose it as a breakpoint.

Note: Please try to use the minimum number of breakpoints. This will help you to maintain your code better.

Conclusion

• Media Queries are a great way to make our design responsive. They will apply or override the styles based on certain rules.

• We have several types of media queries. for example, queries based on height and width, orientation, print, and pointer devices. These will be helpful to make our website user-friendly and responsive.

• Please be careful when writing media queries. Some times order of writing media queries will mess up things. try to follow the small device to large devices to maintain the code clean.

• Try to choose the minimum number of media queries. This will help you while maintaining the code.

---

I hope you learnt something new by reading this post. Please like this and share this post with your friends and community, it motivates me to write more awesome blog posts.

Will see you in my next blog post :)