media query

1@media only screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}

1// Example media query syntax
2@media only screen and (min-width: 768px) {
3  .my-example-class {
4    padding: 50px;
5  }
6}
7
8// Best Practice
9// keep default style for smallest screen size (portrait mobile, below 576px)
10// and then proceed in assending order with media query like below
11
12// Small devices (landscape phones, 576px and up)
13@media (min-width: 576px) { ... }
14
15// Medium devices (tablets, 768px and up)
16@media (min-width: 768px) { ... }
17
18// Large devices (desktops, 992px and up)
19@media (min-width: 992px) { ... }
20
21// so on ...

1// Extra small devices (portrait phones, less than 576px)
2// No media query for `xs` since this is the default in Bootstrap
3
4// Small devices (landscape phones, 576px and up)
5@media (min-width: 576px) { ... }
6
7// Medium devices (tablets, 768px and up)
8@media (min-width: 768px) { ... }
9
10// Large devices (desktops, 992px and up)
11@media (min-width: 992px) { ... }
12
13// Extra large devices (large desktops, 1200px and up)
14@media (min-width: 1200px) { ... }
15

1@media only screen and (min-device-width: 900px) and (max-device-width: 1200px) {
2  /* insert styles here */
3}

1/* Smartphones and larger (mobile-first) */
2
3/* Tablet portrait and larger */
4@media only screen and (min-width: 600px) {}
5/* Tablet landscape and larger */
6@media only screen and (min-width: 900px) {}
7/* Desktop and larger */
8@media only screen and (min-width: 1200px) {}
9/* Big desktop (4k) */
10@media only screen and (min-width: 2500px) {}

1@media only screen and (max-width: 600px) {
2  .class {
3    // Your CSS
4  }
5}

1@media only screen and (max-width: 800px) {
2  body {
3    background-color: ; /*your color*/
4  }
5}

1@media screen and (min-width:480px) and (max-width:800px) {
2    /* Target landscape smartphones, portrait tablets, narrow desktops
3    */
4  }
5
6  @media screen and (max-width:479px) {
7    /* Target portrait smartphones */
8  }
9  
10  @media all and (orientation: landscape) {
11    /* Target device in landscape mode */
12  }
13  @media all and (orientation: portrait) {
14    /* Target device in portrait mode */
15  }
16 /*https://developers.google.com/search/blog/2012/04/responsive-design-harnessing-power-of*/

1@media (max-height : 800px){ /* from 0 to 800 px max height applies */
2  p{
3    font-size:10px
4  }
5}

1@media only screen and (max-width: 600px) {
2  body {
3    // Change size, placement of elements
4  }
5}