Check out example codes for "mobile media query css". It will help you in understanding the concepts better.

Code Example 1

  Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) 

/* Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */

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

/* Large devices (laptops/desktops, 992px and up) 

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

/* Extra large devices (large 
  laptops and desktops, 
  1200px and up) */
@media only screen and (min-width: 1200px) {...}

Code Example 2

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

Code Example 3

@media only screen and (max-width: 600px) {
  .class {
    // Your CSS

Code Example 4

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {


Code Example 5


Code Example 6


@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

Learn ReactJs, React Native from