Question

我想知道是否有办法将静态页面转换为手机页面。通过移动页面，我的意思是可以将桌面内容拖动到更小的窗口大小（例如智能手机大小：320px）。使内容遵循窗口的大小？我该如何更改css？我怎么需要数学？谢谢......我想必须有框架或工具来实现这一目标吗？

请一些指南和想法非常受欢迎。

检查我的静态example

谢谢你的时间！ Y /

Answer 1

我的建议是您首先设计网站而不进行任何定位。只需将它充实并决定排版，颜色等等（即：design.css）。

然后使用媒体查询开始适当地定位事物。对于至少960像素宽的视口（即：design-960.css），它看起来像这样：

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

对于最多359像素宽的视口（即：design-240.css），它看起来像这样：

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

等等。您将需要以下代码，以便在移动设备上以适当的比例呈现：

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

Answer 2

@Yoni;您可以使用mediaqueries在该媒体查询中定义您的css

但在html页面中定义<meta name="viewport" content="width=device-width" />