html – 响应式网页设计技巧,最佳实践和动态图像缩放技术

正如@Tak所说，这里的答案是“渐进增强”和“平缓退化”。然而，他给出的定义是不正确的。这是正确的：

‘Progressive enhacement'(see link)意味着您首先编写旧的浏览器(使用/不使用JavaScript的IE6 / 7是一个很好的起点)，使用经过测试的技术，如HTML4和CSS1，然后在您进行中添加更改在更多的现代浏览器上测试到支持CSS3和大多数HTML5的移动设备上的Chome和Safari。这样，您的目标是为浏览器提供最佳支持功能的组合(其永远不会是完美的，因此请牢记80/20 rule以避免将项目运行到地面)。

“优雅退化”(see link)是一回事，而是一种比较懒惰的做法。您开始使用现代浏览器构建您的网站，然后应用“修补程序”和“修复程序”，直到其在较旧的浏览器上可以接受。这最终创造了更多的工作，而不是从一开始就做好正确的准备工作，而且这种方法通常会发生这种情况，即开发人员/利益相关者在某个时候会放弃(即，到底是什么呢？在IE6 / 7中工作 – 我将对它们进行调整)

2.规范布局的最佳方式

就个人而言，我的建议是，如果您想要在移动设备和桌面设备上进行标准布局，我建议您使用大字体组合(因此它们在微小的移动屏幕中可见)和小型(因此拥有桌面浏览器的人可以阅读所有的细节)在桌面大小的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宽，但通过在320像素的小屏幕上缩小比例可以正常工作(页面上的图像自动为resampled，使用各种方法，如nearest-neighbour sampling和bicubic interpolation，以及字体尽可能地替换为本机字体)。就图像抽样而言，如果您在智能手机上捏过一张照片来“放大”，然后“缩小”，就会知道我在说什么。

您通常不需要担心CSS让您的图像正确重新采样，我注意到，有时候，使用百分比宽度时，有时候会有点有趣，因为如果这样做可以让浏览器更容易地了解项目的位置彼此之间的关系。请注意，您可以专门检测移动浏览器，并将您的网站的宽度设置为320像素，并将其中的所有内容相应地落在同一行上，但实际上在移动设备上没有必要使用工作网站，这样做会强制您维护2个站点，一个移动站点和一个桌面站点(有些公司很乐意做)。

百分比/固定宽度。

我个人倾向于以屏幕为中心的固定宽度(使用CSS margin：0px auto)，我没有在长时间内使用百分比宽度，主要是因为它有点噩梦来标准化布局。如果你使用百分比宽度，你基本上必须做更多的测试，所以我会偏离他们。

请记住，这只是我的意见，一些“reponsive web”的大师会发誓在几乎所有的百分比宽度，我只是没有出售牺牲布局的可预测性，我认为是边际效益的想法。但是后来我来自建立桌面webapps的背景，如果我只是专注于移动网络(水平空间是非常重要的，布局往往更简单)，我可能会有所不同。