There are two orders to create responsive web design:

  1. Mobile first
  2. Desktop first

Mobile First

In this, we first create CSS for mobile device.

We will follow orders – Mobile, Tablet, Desktop

/* For mobile phones: */
.responsive {
    padding: 0 6px;
    float: left;
    width: 100%;
}

/* For tablets: */
@media only screen and (min-width: 600px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

/* For desktop: */
@media only screen and (min-width:768px) {
    .responsive {
         width: 24.99999%;
    }
}

 

Desktop First

In this, we first create CSS for desktop device.

We will follow orders –¬†Desktop, Tablet, Mobile

/* For desktop: */
.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

/* For tablets: */
@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

/* For mobile phones: */
@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

Advertisements