how to convert this site to a mobile site or make it liquid?

Im wondering if there is a way to convert static pages to mobiles pages. By mobile-pages I mean to make it possible to drag the desktop content to a smaller window-size (e.g smartphone size: 320px). Make the content to follow the size of the window? how Do I need to change the css? how do I need to make the math? thanks...I suppose there must be framew开发者_JAVA百科orks or tools to make this possible?

Pls some guides and thoughts will be more than welcome.

Check my this static example

thanks for yr time! Y/

You can use Media Queries. For more information please reference Responsive Web Design: What It Is and How To Use It.

My recommendation is that you first design the website without positioning anything. Just get it fleshed out and decide the typography, colours and so forth (ie: design.css).

Then use media queries to begin positioning things appropriately. For viewports at least 960 pixels wide (ie: design-960.css) it'll look like this:

@media only screen and (min-width: 960px)
{
    // [...]
}

For viewports at most 359 pixels wide (ie: design-240.css) it'll look like this:

@media only screen and (max-width: 359px)
{
    // [...]
}

And so on. You are going to want the follow code so it renders on mobile devices at the proper scale:

<meta name="viewport" content="width=device-width; initial-scale=1"/>

@Yoni; you can use mediaqueries to define your css with in that media query

but define <meta name="viewport" content="width=device-width" /> in your html page

there are other link also http://css-tricks.com/6206-resolution-specific-stylesheets/ , http://webdesign.about.com/od/css3/a/css3-media-queries.htm