Media Queries for responsive web design

What is a Media Query?

Media Query is a CSS technique in CSS 3 that allows to content rendring to different screen resolutions.


  /*For screens greater than 1400px*/
  @media only screen and (min-width: 1400px) { ... }

  /*For screen size 1366px to 1399px*/
  @media only screen and (max-width: 1399px) and (min-width: 1366px) { ... }

  /*For screen size 1280px to 1365px*/
  @media only screen and (max-width: 1365px) and (min-width: 1280px) { ... }

  /*For screen size 1024px to 1279px*/
  @media only screen and (max-width: 1279px) and (min-width: 1024px) { ... }

  /*For screen size 992px to 1023px*/
  @media only screen and (max-width: 1023px) and (min-width: 992px) { ... }

  /*For screen size 768px to 991px*/
  @media only screen and (max-width: 991px) and (min-width: 768px) { ... }

  /*For screens less than 767px*/
  @media only screen and (max-width: 767px) { ... }
			

Min Width And Max Width

Max Width

This query means if device width is lessthan or equals to 767px then do styling. (mostly for mobile devices)


  /*For screens less than 767px*/
  @media only screen and (max-width: 767px) { ... }
			

Min Width

This query means if device width is greater than or equals to 1400px then do styling.


  /*For screens greater than 1400px*/
  @media only screen and (min-width: 1400px) { ... }
			

Combining min-width and max-width

We can use this queries for target a specific range of width (applying styles between 768px to 991px)


  /*For screen size 768px to 991px*/
  @media only screen and (max-width: 991px) and (min-width: 768px) { ... }
			

Orientation

We can use this queries to target orientation of the device it can be either landscape or portrait.


  /*For device orientation landscape */
  @media only screen and (orientation: landscape) { ... }

  /*For device orientation portrait */
  @media only screen and (orientation: portrait) { ... }
			

Cheers !