使网站在所有设备和屏幕尺寸上都可用且一致的最佳实践是什么？

Question

对使网站在所有设备（台式机、上网本或 Ipad 和移动设备（主要是智能手机））上可用且一致的最佳方法感到困惑。

我不是前端开发人员或设计师，所以我不确定什么是最好的。

我一直在阅读 Liquid Layouts、Keeping 2 different version of style sheet（1 个用于屏幕，1 个用于手持设备）和 CSS 媒体查询。

我不确定其中哪一个最适合为我网站的用户提供一致的体验，无论他们是使用智能手机（任何 android、BB、iphone、诺基亚）上网本还是台式机。

请帮忙。

Answer 1

正如我在评论中所说，我认为您应该尽可能简单，并遵守 HTML 和 CSS 等良好标准。

让浏览器/用户选择使用您网站的最佳方式。

还要记住优雅降级/渐进增强和支持页面的逻辑结构。

Answer 2

您正在寻找的是所谓的响应式 Web 设计。

流体网格、灵活图像和媒体查询是响应式 web 设计的三个技术要素，但也需要不同的思维方式。 与其将我们的内容隔离到不同的、特定于设备的体验中，我们可以使用媒体查询在不同的查看环境中逐步增强我们的工作。 这并不是说没有针对特定设备的单独站点的商业案例。 例如，如果您的移动网站的用户目标在 scope 中比在其桌面版中更受限制，那么为每个网站提供不同的内容可能是最好的方法。

但这种设计思维不需要成为我们的默认设置。 现在比以往任何时候都更重要的是，我们正在设计旨在通过不同体验的梯度来查看的作品。 响应式 web 设计为我们提供了前进的道路，最终让我们能够“为事物的潮起潮落而设计。

Think Vitaimin上有一个很好的免费介绍视频。

响应式 Web 设计：基础知识：简介

观察到大约 3/4 的时候，他们开始展示他们在说什么。

Answer 3

根据我收集到的信息（我自己一直在研究），它确实是所有东西的结合。 流动布局适用于不同的显示器尺寸，而媒体查询有助于定位移动和平板设备。 我一直在寻找978 Grid System来格式化我正在开发的一些网站。 它有几个设备的网格，但我的一部分认为它对于我想做的事情来说可能有点太笨重了。

Answer 4

我认为流式布局是最好的，因为它们是最跨平台的并且非常容易实现。 我在我制作的每个网站上都使用它们。

Answer 5

即使在平板设备中，屏幕尺寸和屏幕分辨率的差异也可能需要不同的 fonts 尺寸和链接间距，以确保字体的易读性和链接的准确可触性。 在 10 英寸 iPad 上清晰呈现的页面可能难以阅读，并且在 7 英寸平板电脑上使用起来很笨拙。 7 英寸平板电脑可能会让您觉得自己的手指就像史莱克一样。最近，当我使用 7 英寸平板电脑查看经过修改以在 iPad 上运行良好的网站时，这发生在我身上。 在 7 英寸平板电脑上阅读太小，您并不总是希望您的 7 英寸平板电脑用户捏拉缩放，以便他们可以阅读您的页面并与之交互。 您必须确定目标屏幕的大小并针对该外形尺寸采用适当的 CSS 样式，并且您可能还需要减少内容量和/或为更小和最小的外形尺寸提供替代导航模式。 可能需要动态提供特定于外形尺寸的内容，或者使用 CSS 对内容可见性进行高度精细的控制。

我会从具有“通风”外观的页面开始——避免内容过多且过于“忙碌”的页面。