CSS: Media Query breakpoints

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
}

@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
}


In the above case, mobile is given priority first. But then if the min-width is 600px, which is for tablet, the class is given a different column widths
If the device width is 768px, then considered as desktop and a different set of class styles are applied.


Below are the major breakpoints

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

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

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

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

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}


Below is media query for orientation change

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

To hide / show certain elements based on media query, below can be used

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Below is how we can change the font size according to the media query

/* If the screen size is 601px or more, set the font-size of

to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of

to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}