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 :

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.

/* 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 or CSS flex box

If you want to practice your CSS you can checkout my youtube video on responsive Instagram UI clone.

If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [Subscribe], [Instagram]

Thanks For reading.

Comments

[Elena]

You don't need the @media (max-width: 600px) {...} part, because your non responsive code should work everywhere. Then starting from the @media (min-width: 600px) {...} and up, you apply changes to your base code for each specific break point, where you overwrite certain parts.

[Modern Web]

Yes but I didn't said you need all of these, these are just some common breakpoints.

[Elena]

Indeed, depending on where you start you might have for desktop first:

• @media (max-width: 1200px)
• @media (max-width: 992px)
• @media (max-width: 768px)
• @media (max-width: 576px)

while for mobile first you can have:

• @media (min-width: 576px)
• @media (min-width: 768px)
• @media (min-width: 992px)
• @media (min-width: 1200px)

[Modern Web]

Yes, I agree. Well what you prefer mobile first or desktop first. I prefer desktop first btw.😅😅

[Chadrack kyungu]

I prefer mobile first coz it makes ur life easier and reduces repetition of styles

[Vitor Acacio]

I also placed a lot of importance in media queries until I learned about the clamp function. It lets you specify a minimum and maximum sizes (in absolute size) and an ideal size between them (in relative size). It's good to be paired with minmax too.

Works great for responsive elements sizes, but where it excels is with making font sizes responsives. I was amazed that after learning this, I was able to reduce a lot of the rules that needed to vary per media query and I was able to cut my stylesheets by half.

[Supportic]

polypane.app/blog/the-complete-gui... <3

• update polypane.app/blog/responsive-desig...