Posted inHTML / CSS

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype