media query min and max – How Min- and Max-Width Queries Work?

media query min and max and Combining media query expressions Examples. Media queries enable us to create a responsive experience.

media query min and max (Min-width , Max-width & Media Queries)

media query max and min width together – We will also provide source code examples for media queries using max and min screen widths.

Basic syntax of a media query

@media media-type (media-feature){
/*Styles go here*/
}

Media features

• Orientation
• Resolution
• Aspect ratio
• Width
• Height

CSS Media Queries Examples

Max-width

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

The max-width example:

.container {
  width: 80%;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 20px;
  }
}

The min-width example:

.container {
  width: 100%;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .container {
    width: 80%;
  }
}

Min-width

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

Breakpoints

Name	Width
Mobile portrait	<576px
Mobile ladscape	≥576px
Tablet portrait	≥768px
Tablet ladscape	≥992px
Laptop	≥1200px
Desktop and above	≥1400px

Combining media query expressions

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

media query min and max

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

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

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

Don’t Miss : CSS DEMO

media query min max

@media screen and (min-width: 222px) and (max-width: 640px) {
  .example {
    display:block;
    clear:both;
  }
}

Media Queries for Standard Devices

Laptops

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

I hope you get an idea about media query min and max.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.