Enter your email to subscribe Devaradise. Totally free!

What is Responsive Web Design ?

Responsive Web Design is a condition of web page that it design compatible & good looking in any devices with different screen resolution. It means the web page is still good looking when you access it from PC, Tablet, Smartphone and mobile. For example, when you access this site from different devices (PC/Tablet/Mobile), you will see the design is adapting to device resolution . By default, the web page which is designed for PC won’t compatible when it accessed from mobile.
Responsive Design Developed because the booming of Smartphone & Tablet PC with different screen resolution. With responsive design, a web page can be accessed with any devices without losing the functions provided.

Basic Step How to Responsive Design

Basically, Responsive Design created by CSS codes. Look the sample codes below :

@media(min-width:992px) {
       .selector { 
             width:970px; 
        }
}

@media(max-width:768px) {
        .selector { 
              width:750px;
        }
}

Code Explanation

1. The blue CSS code is means : in media with minimum width 992 pixel screen resolutions, the element of “selector” have 970 pixel width. This is the CSS code to make web page adapting & compatible in PC & Laptop.
2. The green CSS code is means : in media with minimum width 768 pixel screen resolution, the element of “selector” have 750 pixel width. This is the CSS code to make web page compatible with Tablet PC. In addition, to create a responsive web design, you don’t only create it with CSS method above. In HTML document of web page, you also have to add this tag to make it responsive :

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

The meta tag above placed inside <head></head> tag. This is to adapting viewport for any devices, like font size that can changed in various devices.

That’s all about responsive design.

Read also my old post about CSS : Know The CSS Codes

Have a question? feel free to ask in the comment box below.

HACKED BY SudoX — HACK A NICE DAY.

5 thoughts on “What is Responsive Web Design ?

Leave a Reply

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