css - 如何将此站点转换为移动站点或使其具有流动性？

Question

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

请提供一些指导和想法，我们将非常欢迎。

检查我的这个静态示例

谢谢你的时间！是/

score 1 · Accepted Answer

我的建议是你首先设计网站而不定位任何东西。只需将其充实并决定排版、颜色等（即：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"/>

score 0 · Accepted Answer

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

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

2 回答 2