Media query order for Responsive web design

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%;
    }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s