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

【问题标题】：How to create web pages for all resolutions (both mobile device and computer)如何为所有分辨率（移动设备和计算机）创建网页
【发布时间】：2015-03-25 11:10:22
【问题描述】：

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

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

问题是，当我为电脑浏览器调整 HTML 页面时，字体对于移动浏览器来说太小了。

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

我对 CSS 了解不多。有没有办法为所有分辨率创建一个 HTML 页面？或者我必须生成两种 HTML 页面，一种用于计算机浏览器，一种用于移动浏览器。

我与我们的 UI 设计师讨论过这个问题。他们告诉我，我必须使用几个不同大小的css文件+图片来做。好像我们是在上个世纪。

终于找到了这个工具：Pingendo，对于这个 HTML 页面来说已经足够好了。

【问题讨论】：

您确实需要先尝试搜索 - 您的意思是“响应式设计”。
有许多 css 框架作品，可以使您的网页适用于可用的设备。 “引导程序”、“基础”等
@patricksweeney 谢谢。其实这是我第一次听到“响应式网页设计”这个词。
@web2tips 谢谢。我听过很多次“引导程序”。我会试试的。
@neohope 这很好 - 但仅仅在这个网站上搜索您的标题，更不用说谷歌，可能会出现一堆结果。

标签： html css

【解决方案1】：

你要找的是"Responsive Web Design"。

有许多有用的模式。最重要的是这个：

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

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

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

您还想设置视口。这对于移动设备非常很重要！

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

【讨论】：

谢谢。我最好先和我们的 UI 设计师谈谈。