CSS media query : how to make website responsive
Tags: css, beginners, webdev, html
Published: 2021-07-14 09:24:19

Media query are the most important concept of CSS now days. As majority of users use their phone or tablet to visit websites. It is important these days to make website responsive.

#What is Responsive website ?

Well we all heard about responsive website is important or your client need a responsive website but ultimately what does it mean? Responsive website is a term refer to your website responsiveness which mean your website is looking good in desktop, mobile or tablet.

And to make responsive website with CSS we use `@media` media query.

#Media Query

Media query is used to add different styles according to the screen size or orientation or resolution. you can even change styles of your site if it is being print or if user is using screen reader.

#Syntax

```CSS
@media (condition) {
  CSS styles;
}
```
So we start using media query with `@media` and after that we have to give condition or you can check for media device. Let's take some examples.

If you want to add different style when the screen width is 500px or less. 
```CSS
@media screen and (max-width: 500px){
   .element{
       styles;
   }
}
```
In the above example after `@media` we used `screen` keyword, this is used to define that you are checking screen. you can also type `all | print | speech`. After that, you can see `and` keyword, that `and` means whenever there is a screen, and the condition is true, apply the styles. And the last we have the condition.

But although we have lot's of keywords, and media types generally I use this syntax to make responsive design.

```CSS
@media (max-width: 500px){
   .element{
      stylessss;
   }
}
```

These conditions are know as break points. For responsive website we mostly use two condition :

1. `max-width` : This means if you say `max-width:500px` then the following style only be applied when the view port width is 500px or less.

2. `min-width` : This is the reverse of `max-width`. It means if you say `min-width:500px` then the following style only be applied when the view port width is 500px or more.

So that's it about media queries. But for responsive design you should know some common break points.

```CSS
/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media (min-width: 1200px) {...}
```
I hope you understood media query.If you have any doubt feel free to ask me comments section.

You can also read [CSS positions](https://dev.to/kunaal438/css-position-everything-you-need-for-good-developer-pfh) or [CSS flex box](https://dev.to/kunaal438/display-flex-complete-guide-on-css-flex-box-2021-5bi2)

If you want to practice your CSS you can checkout my youtube video on responsive [Instagram UI](https://www.youtube.com/watch?v=f9fqiNM30ik) clone.

If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [<a href="https://www.youtube.com/c/modern_web?sub_confirmation=1">Subscribe</a>], [<a href="https://www.instagram.com/modern_web_channel/">Instagram</a>]

Thanks For reading.