Media Query

Media Query

Mobile

Mobile portrait

@media only screen and (max-width: 767px){
  /* STYLES GO HERE */
}

Mobile landscape

@media only screen 
and (min-width: 320px) 
and (max-width: 767px)
and (orientation: landscape){
  /* STYLES GO HERE */
}

Tablet

Tablet in portrait and landscape (iPad)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
  /* STYLES GO HERE */
}

Note: use just min-width if you want use for responsive.

Tablet in landscape (iPad)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  /* STYLES GO HERE */
}

Tablet in portrait (iPad)

@media only screen 
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { 
  /* STYLES GO HERE */ 
}`

Mobile first approach

You should use min-width and then raise the pixels for different viewport:

@media (min-width: 40em) {
  /* STYLES GO HERE */
}

NO Mobile First

@media only screen and (max-width : 768px) {
  /* STYLES GO HERE */
}
@media only screen and (max-width: 1024px), screen and (max-height: 680px){
  /* STYLES GO HERE */
}
@media only screen and (max-width: 1024px) and (max-height: 768px) {
  /* STYLES GO HERE */
@media only screen and (max-width: 1440px) {
  /* STYLES GO HERE */
}

Target IE with media query

@media all and (-ms-high-contrast:none){
  /* STYLES GO HERE */
}

huckbit

Programmer by day and mostly by night as well.