Responsive Webdesign using HTML5 and CSS3

What exactly is responsive web design?
Responsive Website Design is quite important for any business owner who has a website. it allows your visitors to browser your website with any device
There are three very important elements in responsive web design.

1-Flexible Layouts
2-Flexible Images
3-Media Queries

/* smartphones */

@media (min-width: 320px) and (max-width: 480px) {
...
}
/* smartphones in landscape mode */

@media screen and (min-width: 480px) {
...
}

/* tablets in portrait mode */

@media screen and (min-width: 768px) {
...
}
/* using width and height */
@media (max-width: 960px) and (max-height: 200px) {

}
/* tablets in landscape mode */

@media screen and (min-width: 1024px) {
...
}

/* standard laptop screens */

@media screen and (max-width: 1220px) {
...
}

/* bigger desktop screens */
@media screen and (min-width: 1440px) {
...
}
/* orientation */
@media (orientation: portrait) {
...
 }
/* resolution */
This media query expresses that a style sheet is usable on devices with resolution greater than 300 dots per inch:
@media print and (min-resolution: 300dpi) {
...
}

Reference URL

About The Author

kougi

Hey! My name is kougi. I’m a Web Developer and Designer. I’ve been working as a Web Developer & Designer since early 2011. I’m also the Co-Founder of CamerCouncil. Please feel free to contact me at anytime if you have questions or comments. You can also cicle me for updates on Google+!

If you liked this article then please feel free to: