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.
Sana Ali
Web Design is really so good.So thanks for the posting.Web Designing is a good way to improve your skills.
For further info:
uae website designing
Jefry Dewangga
If we are lazy to make the design, we can use the css framework like Foundation by Zurb and Twitter Bootstrap. 🙂
Syakir Rahman
Yep.. That’s right
https://whataboutessay.com/essaywriters
Hurrah, that’s what I was seeking for, what a stuff!
present here at this website, thanks admin of this web site.
Rankerz
Fantastic post on how to get responsive web design done, this article highlights some of the important points and is a good introduction into how people can design websites for different platforms and devices.