/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

1 vote267 views1 answer
Cursor: not-allowed is not working with pointe events none in css
CSS
1 vote269 views1 answer
What port does wss use
CSS
3 votes283 views2 answers
Css disable button click
CSS
27 votes290 views3 answers
@keyframes
CSS
7 votes317 views6 answers
Css background overlay
CSS
29 votes268 views4 answers
Css input selector
CSS
0 vote236 views1 answer
Html.css.js
CSS
0 vote282 views1 answer
Beautiful checkbox css
CSS
0 vote296 views1 answer
Also define the standard property 'border-radius' for compatibility css(vendor prefix)
CSS
0 vote259 views1 answer
Content visability auto
CSS