如何扩展移动网站以适应多种屏幕尺寸和设备

Question

因此，我正在开发我的第一个移动版网站，但我遇到了一个在我看来似乎非常困难的关于布局和缩放的问题。

如何制作一个在各种设备（从 3.7 英寸机器人到 9.7 英寸 iPad）上看起来都不错的移动网站？

然后如何让它在纵向和横向上都好看？

现在我使用“background-size” CSS3 属性设置为“cover”来缩放背景，然后使用一些 JS 来根据屏幕大小缩放内容。

尽管我看到了几个关于这个主题的 SO 问题，但似乎没有一个问题能提供我需要的洞察力。任何方向将不胜感激。

---

你可以在http://danielcampbell.net/RKAdler/查看我的进度

预览我在手机上的进度：

在您的手机上打开它或下载移动可视化工具，例如 Chrome 的 Ripple extension

安装后转到 RK Adler 站点并通过单击右上角的图标 @ 并选择“启用”来启用 Ripple。

Answer 1

尽量避免在主要布局中使用像素。例如，不要为#wrapper 元素定义宽度和高度，而是使用 100%。此元素中使用百分比调整大小的所有内容都将随之缩放。

你应该查看一些关于响应式网页设计的资源，最近它们像很多房间一样突然出现:)

查看以下网站： Slideshow by Netlash

A great example and slideshow about it 一定要看看他们的演示代码

A google search - Google 是你的朋友！