Responsive Web design Examples code

That’s why we felt that a post on examples of sample codes for a basic responsive website was in order, and here it is!

The Three Main Components of Responsive Websites

Any responsive website has three main components – flexible layouts, media queries and flexible media. The first component, flexible layouts, implies that the layout of the website is built using flexible grids and can dynamically resize to any width. Flexible grids are measured on the basis of relative length units such as percentages or em units, which then determine the width, margins, padding, etc.

Some common codes related to the viewport size of the browser or device are:

• vw – viewports width
• vh – viewports height
• vmin – minimum of the viewport’s height and width
• vmax – maximum of the viewport’s height and width

HTML and CSS codes for Flexible Grids

Using the relative length and width measurements based on percentages or em units, you can work out your CSS and HTML codes.