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

Question

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

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

我一直在阅读Liquid Layouts，保留2种不同版本的样式表（1个用于屏幕，1个用于手持设备）和CSS Media Queries。

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

请帮忙。

Answer 1

正如我在评论中所说，我认为你应该尽可能简单地遵守HTML和CSS的标准。

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

另请注意graceful degradation / progessive enhancement以及支持这些网页的逻辑结构。

Answer 2

您要找的是Responsive Web Design。

  

流体网格，灵活的图像和   媒体查询是三个技术问题   响应式网页设计的成分，   但它也需要一种不同的方式   思考。而不是隔离   我们的内容变得截然不同，   特定于设备的体验，我们可以   逐步使用媒体查询   加强我们在不同的工作   查看上下文。那不是说   没有商业案例   针对特定的单独站点   设备;例如，如果用户   您的移动网站的目标更多   范围有限，而不是桌面   等价，然后服务不同   每个人的内容可能是最好的   方法

     

但那种设计思维   不需要是我们的默认值。现在   我们比以往任何时候都在设计工作   意味着要沿着渐变的方向观看   不同的经历。响应式网络   设计为我们提供了前进的方向，   终于允许我们“为...设计   潮起潮落。

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

Responsive Web Design: Fundamentals : Introduction

直到大约3/4的距离观察，他们开始展示他们正在谈论的内容。

Answer 3

从我收集的内容（自己一直在研究）中，它确实是一切的组合。液体布局适用于不同的显示器尺寸，而媒体查询则可帮助定位移动设备和平板设备。我一直在寻找978 Grid System来格式化一些我正在研究的网站。它有几个设备的网格，但我认为它可能对我想做的事情有点过于庞大。

Answer 4

我认为液体布局是最好的，因为它们是最跨平台的并且很容易做到。我在我制作的每个网站上都使用它们。

Answer 5

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

我从具有“通风”外观的页面开始 - 避免内容过多而且“太忙”的页面。