/CSS/Media query for mobile min and max width

Media query for mobile min and max width

Media query min and max

/* Max-width */
@media only screen and (max-width: 600px)  {...}

/* Min-width */
@media only screen and (min-width: 600px)  {...}

/* Combining media query expressions */
@media only screen and (max-width: 600px) and (min-width: 400px)  {...}

Min and max width media query

@media (max-width: 989px) and (min-width: 768px) {}

Media query min and max width for all devices

@media only screen and (max-width: 480px) and (min-width: 320px)  {
  /* mobile-devices */
  
}

@media only screen and (max-width: 768px) and (min-width: 481px)  {
  /* iPads, Tablets */
   
}

@media only screen and (max-width: 1024px) and (min-width: 769px)  {
  /* small screens, laptops */
  
}

@media only screen and (min-width: 1024px)  {
  /* Desktops, large screens */

}

Media query for mobile min and max width both

@media only screen and (max-width: 600px) and (min-width: 400px)  {...}

Source: emailonacid.com

Media query for mobile min and max width

@media only screen and (max-width: 399px) {...}
@media only screen and (min-width: 400px) and (max-width: 600px)   {...}
@media only screen and (min-width: 601px) {...}

Media query min and max width for all devices

@media only screen and (max-width: 480px) and (min-width: 320px)  {
  /* mobile-devices */
    .width {
    background: var(--clr-grey);
  }
}

@media only screen and (max-width: 768px) and (min-width: 481px)  {
  /* iPads, Tablets */
    .width {
    background: var(--clr-pink);
  }
}

@media only screen and (max-width: 1024px) and (min-width: 769px)  {
  /* small screens, laptops */
    .width {
    background: var(--clr-yellow);
  }
}

@media only screen and (min-width: 1024px)  {
  /* Desktops, large screens */
    .width {
    background: var(--clr-yellow);
  }
}

-2

Similar codes

0 vote133 views2 answers
Css gradient rgba to hex
CSS
2 votes150 views1 answer
Css no bottom ouline
CSS
0 vote171 views1 answer
Aplicar padding a sombra
CSS
-1 vote160 views3 answers
Css ul to center
CSS
31 votes153 views6 answers
Overflow
CSS
5 votes137 views3 answers
Repeat method
CSS
2 votes140 views1 answer
Css disable dropdown on input
CSS
0 vote347 views1 answer
Get into a Docker container bash
CSS
19 votes160 views2 answers
How to underline font in css
CSS
1 vote147 views1 answer
Css caret-color property
CSS