Back to Top

Learn Responsive Web Design Online

Steps for Responsive Design

Before few days back, one of my friend asked me that how to build responsive layout and I just replied him that my blog is responsive and even I have worked with many websites’ responsive layouts, you can have a look into devices and. you can see CSS into it to develop responsive layout.

Still My friend was confused and not got much idea how to develop responsive layout so today I am going to explain steps to show you the basics of responsive design for any website work with device orientations which detect the type of device and change the site’s behavior accordingly.

So, Let’s go through the steps

Step 1:Include the Viewport

First of all, add below meta tag into your < head > tag.

This is a most important meta viewport tag to set the correct scale of a website in devices.If it’s not added, responsive layout may suffer from some issues like fonts not matches with the design.

Step 2: Add Media Screen

Next, Add css link with media=”screen” into < head > tag which is shown in below code:

It’s used to allow part of CSS rules to the specific devices on the specific configuration.

Step 3: Media Queries

CSS3 media query play the main role for responsive design.CSS3 media queries are one kind of conditions to figure out what resolution of device orientation it’s being served on the browser.

So Here, I am going to explain most used media queries are:

  • 320px – iPhone Portrait
  • 480px -iPhone Landscape
  • 768px – Ipad Portrait
  • 1024px – Ipad Landscape
  • 1200px – Normal views

Let’s see Breakpoints we need to put for most used media queries.

/* Media Queries for iPhone Portrait */
@media only screen and (max-width:479px)  {
/* Media Queries for iPhone Landscap CSS */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* Media Queries for iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 799px) {
/*Media Queries for Normal */
@media only screen and (min-width: 1024px) and (max-width: 1200px) {

Wrap Up:

Here, I have explained basics about responsive layout but You can write as many media query as you like. If you have the option of testing on multiple mobile devices, you can test it into mobile devices or if not,you can check responsive layout on this site.

I hope this post was useful & it has helped you to create responsive design for your website.Thanks for reading and feel free to share your thoughts! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to use Session in Joomla

Posted on 7 years ago


Hello world

Updated 1 month ago

Nick Carter

In depth Understanding of Laravel Core

Updated 3 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – June 2015

Posted on 4 years ago


The Reader’s Poll – August 2014

Posted on 5 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 6 years ago