Responsive web design is very important for any kind of website. There are couple of ways to make a responsive web design. Media query is one of them and it is one of the most important parts of responsive web design. Here I am going to talk a bit about Media queries and how to use them.

Media query:

It is a CSS3 feature that makes a webpage adapt its layout to different screen sizes and media types.

Syntax:


@media media type and (condition: breakpoint) {
  // CSS rules
}

We can target different media types under a variety of conditions. If the condition and/or media types meet, then the rules inside the media query will be applied, otherwise, they won’t.

@ Media Rule

We start defining media queries with @media rule and later include CSS rules inside the curly braces. The @ media rule is also used to specify target media types.


@media () {
  // CSS rules
}

Parenthesis

Inside the parenthesis, we set a condition. For example, I want to apply a larger font size for mobile devices. To do that, we need to set a maximum width which checks the width of a device:

Look like below code


 .text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Note:Always put your media queries at the end of your CSS file.

Media Types

If we don’t apply a media type, the @ media rule selects all types of devices by default. Otherwise, Media types come right after the @ media rule. There are many kinds of devices but we can group them into 4 categories:

  • all — for all media types
  • print — for printers
  • screen — for computer screens, tablets and, smart-phones
  • speech — for screen readers that “read” the page out loud
  • For example, when I want to select only screens, I will set the screen keyword right after the @ media rule. I also must concatenate the rules with the “and” keyword:

    
      @media screen and (max-width: 480px) {
      .text {
        font-size: 16px;
      }
    }
    

    Breakpoints

    Breakpoints are maybe the most common term you will hear and use. A breakpoint is a key to determine when to change the layout and adapt the new rules inside the media queries. Let’s go back to our example at the beginning:

    
        @media (max-width: 480px) {
      .text {
        font-size: 16px;
      }
    }
        

    Here, the breakpoint is 480px. Now the media query knows when to set or overwrite the new class. Basically, if the width of a device is smaller than 480px, the text class will be applied, otherwise, it won’t.

    Most common used Breakpoints

    In below I wrote most common used CSS media query breakpoints in daily programming

    List of the breakpoints accoriding to the different device:

  • Mobile device:320px — 480px
  • 
              @media (max-width: 480px) { 
                body { 
                    background-color: red; 
                } 
                

  • iPads, Tablets:481px — 768px
  • 
                @media (min-width: 481px) and (max-width: 767px) { 
                body { 
                    background-color: yellow; 
                } 
            } 
                

  • Small screens, laptops:769px — 1024px
  • 
                @media (min-width: 768px) and (max-width: 1024px){ 
                body { 
                    background-color: blue; 
                } 
            }  
                

  • Desktops, large screens:1025px — 1200px
  • 
               @media (min-width: 1025px) and (max-width: 1280px){ 
                body { 
                    background-color: green; 
                } 
            }  
                

  •  Extra large screens, TV:1201px and more 
  • 
                 @media (min-width: 1281px) { 
                body { 
                    background-color: white; 
                } 
            } 
                

    As I said above, these breakpoints can different and there is no standard exactly defined, but these are some commonly used ones.


    Note:Min-width properity starts from small width to big width and Max-width properity starts from big to small width

    Thanks for reading!