如何为所有分辨率（移动设备和计算机）创建网页

Question

我正在尝试编写一个小工具，将图片和文本文件转换为HTML页面。

我的HTML页面的布局很简单：

问题是，当我调整计算机浏览器的HTML页面时，字体对于移动浏览器来说太小了。

当我调整移动浏览器的HTML页面时，页面在计算机浏览器中太难看了。

我对CSS知之甚少。有没有办法为所有分辨率创建HTML页面？或者我必须生成两种HTML页面，一种用于计算机浏览器，另一种用于移动浏览器。

---

我和我们的UI设计师讨论过这个问题。他们告诉我，我必须使用几个css文件+不同大小的图片才能完成。我们似乎在上个世纪。

最后，我找到了这个工具：Pingendo，这对于这个HTML页面已经足够了。

Answer 1

您正在寻找的是"Responsive Web Design"。

有许多图案对此有用。最重要的是这一个：

@media all and (max-width: 1024px) { ... }

您可以在此处为不同的浏览器尺寸定义不同的样式表。这样，您的网站将涵盖智能手机，平板电脑和大型桌面。使用紧凑舒适的智能手机布局和通常的布局，例如最小宽度 1024px 。

至于触控优化，无论如何你必须这样做。如今，您无法发布没有触摸优化的网站。但不要担心，这是问题的一小部分，因为基本的触控功能根本不需要太多定制。

此外，您还想设置视口。这对移动设备来说非常非常重要！

<meta name="viewport" content="width=device-width">