media query in css for tablet and desktop code example

Example 1: media query

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Example 2: mobile tablet desktop media queries

Syntax:

@media( media feature ) {
    // CSS Property
}

The screen resolutions of different devices are listed below:

Mobile (Smartphone) max-width: 480px
Low Resolution Tablets and ipads max-width: 767px
Tablets Ipads portrait mode max-width:1024px
Desktops max-width:1280px
Huge size (Larger screen) max-width: 1281px and greater

Tags:

Misc Example

Related