Search code examples
htmlcssadjustable

Adaptive Layouts in CSS3

I am trying to convert my website index page to be adjustable. I want the whole conent of the page to be adjustable. By adjustable I mean if some one opens the page in a new window and try to resize the window by dragging it with mouse, the content of my page also adjust itself according to the width and height of the window.

Is it possible using only CSS or I have to use some javascript as well?

What I need is something like [this][1]

Any help or advice will be highly appriciated

Thanks

Solution

  • What you want to do is to Responsive Design

    For example you can make your css target a particular devise as:

    //General css 


/*MEDIA BETWEEN 300 - 1000PX */ 
@media all and (min-width:300px) and (max-width:1000px)
{


}

/*MEDIA BETWEEN 621 - 800PX */ 
@media all and (min-width:621px) and (max-width:800px)
{

}

/*MEDIA BETWEEN 300 - 620PX */ 
@media all and (min-width:300px) and (max-width:620px)
{

}

    Some of the pages that can help are:

    1. http://googlewebmastercentral.blogspot.in/2012/04/responsive-design-harnessing-power-of.html
    2. http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

    NOTE: use em and % instead of px and pt