Friday, 17 February 2012

Exploit of CSS3 Media Query and Responsive Website Design

Responsive website design the term is booming these days all around the web world the concept behind creation of responsive website design is only make your web page accessible from any web devices, and also in different resolutions.

Sometimes it become tough that arranges different designing objects and elements in a way which can be run same in all resolution and it is not possible to create different websites for different devices and different screen resolution.

As we all know that when ever problems occur always there is solutions and so for create responsive website design the solutions are CSS3 media queries, Fluid grid and Fluid images.

Today let’s we talk about CSS3 media query to create responsive website design. CSS3 media query is already in lame light these days and because of it only we can see many responsive website designs. Media query is a simple part of code newly introduced in CSS3. The code of media query placed in a web page header or a stylesheet.

It is use to detect different information about users and their web devices and send precise stylesheet based on the information. There are different media features available which we can use it as a query but among all of them the important one is browsers width as we all know different browser’s have different width and web designers Florida in Spinx, Florida takes extra care about it while design and develop any website.

Through a media query we can figure out width of different browsers used by different users around the world and we can assume the web device used by users.


• 320 x 480 – Smartphone
• 480 x 320 – Smartphone in landscape orientation
• 768 x 1024 – iPad
• 1024 x 768 – iPad in landscape orientation / netbook
• Anything larger – Desktop / laptop computer

So by applying different CSS3 media query we can create a responsive website design which can be work well and also in same manner among different web devices with different screen resolutions.

Copyright © 2012

No comments:

Post a Comment