html - 响应式Web设计技巧，最佳实践和动态图像缩放技术

Question

我希望这个问题不会因为涉及面太广而最终被关闭，但我想知道响应式/自适应Web设计，即一个适用于所有浏览器和所有设备的网站。

在结构和布局方面，实现此类站点的最佳方法是什么？

我一直在尝试阅读它，因为移动网站现在是一件大事，而且会持续一段时间，但是我找不到提示和指南的列表，我认为如果可以在SO上找到这样的资源那我们都可以受益。

让我着迷的另一件事是如何动态缩放图像？

在所有事情中，这最让我感到困惑的是，我猜测的布局可能是使用百分比而不是像素值完成的，因为像素在一种设备之间会有所不同，但是图像可能是在一个网站上实现所有功能的关键因素。

我期待阅读人们的意见和答案，即使这只是我找不到的网上教程的链接。

Answer 1

1.一个网站所有浏览器。

正如@Tak提到的，这里的答案是“渐进增强”和“优雅降级”。但是他给出的定义不太正确。这里是合适的:

'渐进式增强'(see link)意味着您首先使用经过测试的技术(例如HTML4和CSS1)为旧浏览器编码(IE6 / 7，带有/不带有JavaScript是一个很好的起点)，然后在您添加增强功能通过在支持CSS3和大多数HTML5的移动设备上测试较现代的浏览器(包括Chome和Safari)取得进步。这样，您的目标是为任何浏览器提供可能受其支持的功能的最佳组合(顺便说一句，它永远不会是完美的，因此请记住80/20 rule以避免将项目运行到地面)。

'优美的降级'(see link)有点相同，但是倒退了，这是一种更懒惰的方式。您开始使用现代浏览器构建网站，然后应用“补丁”和“修复”，直到在较旧的浏览器上被接受为止。最终，这比从一开始就进行适当的计划创建了更多的工作，而这种方法通常会发生的事情是，开发人员/利益相关者将在某个时候放弃(即，到底是什么？要完成这项工作的太多工作)在IE6 / 7中工作-我将对其进行范围界定)

2.标准化布局的最佳方法

就个人而言，我的建议是，如果要在移动设备和台式机设备上使用标准布局，建议您使用BIG字体(以便在小巧的手机屏幕上可以看到)和小字体(以便拥有台式机浏览器的人可以阅读)组合使用所有详细信息)放在桌面大小为900-1000px的宽度上。

该站点是一个示例:

http://www.valuetrader.net

当我在桌面浏览器中打开它时，会看到很多细节，但是当我在旅途中使用智能手机时，所有关键信息(即我应该买还是卖股票？)都以非常大的字体显示在我的小屏幕上看起来清晰可辨。

2014年更新

问题的这一部分现已有效地更改为“实现布局的最佳方法是什么？”。

目前(以及最近几年对CSS3的广泛支持)，跨设备布局设计的标准方法是使用基于 media queries 的所谓“响应式”布局。有许多CSS frameworks可用来使用户开始使用适合移动设备的布局。

“响应式”设计的基本原理是，在移动设备上滚动时，垂直空间实际上是无限的，因此您仅受水平空间的限制。因此，您必须确保随着屏幕变小，让页面流动来填充所有可用的水平空间，并且将任何导航栏或水平元素垂直折叠，以使项目彼此堆叠而不是使用空间水平地。

测试网站“响应能力”的标准方法是拖动浏览器窗口的一侧以减小可用宽度。

更好的方法是使用开发人员工具，例如Chrome具有用于切换设备模式的按钮，下面是使用Stackoverflow的示例:



为桌面和移动屏幕上的#site-banner元素指定布局的媒体查询示例如下:

/* DESKTOP SUPPORT */
#site-banner { width: 1000px; background: #fff; margin: 0px auto; height: 120px; }

/* TABLET SUPPORT - rules apply below 1000px width */
@media all and (max-width: 1000px) {
    #site-banner { width: 700px; }
}

/* PHABLET & MOBILE SUPPORT - rules apply below 700px width */
@media all and (max-width: 700px) {
    #site-banner { width: 480px; height: auto; }
}

/* MOBILE SUPPORT - rules apply below 480px width */
@media all and (max-width: 480px) {
    #site-banner { width: auto; height: auto;}
}

3.动态图像缩放如何完成？

移动设备可以为您完成很多工作，因此通常您只需要了解其工作方式即可。基本上，当第一个移动浏览器问世时，他们必须确保已经可以使用台式机浏览器的网站也可以在移动设备上运行(否则，没人会使用智能手机浏览网络)，因此他们不得不提出聪明的方法来检测站点的宽度并将其调整为可用的屏幕分辨率。

例如，我的网站“ www.desalasworks.com”被编码为900px的宽度，但是通过在320px的小屏幕上缩小比例，它可以正常工作(页面上的图像使用多种方法(例如 resampled和 nearest-neighbour sampling以及字体)自动变成 bicubic interpolation尽可能替换为本地字体)。就图像采样而言，如果您曾经在智能手机上捏过一张照片以“放大”和“缩小”，那么您知道我在说什么。

您通常不需要担心CSS来使图像正确地重新采样，我注意到有时使用百分比宽度时它们有些有趣，因此请坚持使用像素，这样可以使浏览器更容易分辨出项目位于何处彼此之间的关系。请注意，您可以专门检测移动浏览器，并将站点的宽度设置为320px，并且其中的所有内容都相应地位于行内，但实际上，在移动设备上安装工作站点不是必需的，这样做会迫使您维护2个站点，一个移动站点和一个桌面站点(有些公司很乐意这样做)。

4.百分比/固定宽度。

就我个人而言，我倾向于使用以屏幕为中心的固定宽度(使用CSS边距:0px自动)，我很长时间没有使用百分比宽度，这主要是因为它有点麻烦，无法标准化布局。如果您使用百分比宽度，则基本上必须进行更多测试，因此我倾向于远离它们。

请记住，这只是我的观点，某些“响应式网络”专家将几乎对所有内容都采用百分比宽度，我只是出于牺牲边际可预测性的想法而卖掉了，我认为这是边际 yield 。但是后来我来自构建桌面Web应用程序的背景，如果我只专注于移动Web(水平空间非常宝贵，布局往往更简单)，我可能会有所不同。