CSS media query : how to make website responsive

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

@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.

@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.

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

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

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.

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.

/* 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) {...}