Thursday, 17 October 2013

Responsive Design

One of internet's buzzwords is responsive design. It means designing webpages that adapts to any screen. It is not very difficult to create.

The clear advantage of responsive websites is that you only have to maintain one websites for all devices.

Responsive design involved using CSS3 features. You need to use media queries to specify how a page should be displayed for set screen resolutions. Specify the screen resolution cases by using @media (max-width: x px) and (min-width y px), where x and y are the resolutions you want to specify.

Then you add the opening bracket, write the CSS specifications using the usual CSS selectors and properties and then add the close bracket.

For each media query, you should change the size of the images so that they fit within the body of the page. Low resolution screens should have larger fonts and smaller images and vice versa.

CSS3 can be displayed on any modern desktop and mobile browser such as Firefox, Chrome and Internet Explorer.

The end result of the page would be good looking on any screen.

No comments:

Post a Comment