问题
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 frameworks 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/
回答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
回答2:
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"/>
来源：https://stackoverflow.com/questions/7387977/how-to-convert-this-site-to-a-mobile-site-or-make-it-liquid