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

Question

我希望这个问题不会因为过于广泛的主题而被关闭，但我想知道响应/自适应网页设计，即所有浏览器的所有设备的网站。

在结构和布局方面，实施此类网站的最佳方式是什么？

我正在尝试阅读它，因为移动网站现在是最重要的事情，并且会暂时但我找不到提示和指南列表，我认为如果这样的资源可用在这里，我们可以受益。

另一件让我感到兴奋的是如何进行动态图像缩放？

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

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

Answer 1

<强> 1。一个网站都是所有浏览器。

正如@Tak所提到的，这里的答案是“渐进增强”。和＃＆＃39;优雅退化＆＃39;。然而，他给出的定义并不完全正确。这是正确的：

＆＃39; 渐进式增强＆＃39; （see link）意味着您首先使用经过验证的技术（如HTML4和CSS1）对旧浏览器进行编码（使用/不使用JavaScript的IE6 / 7是一个很好的起点），然后在进行过程中添加增强功能在支持CSS3和大多数HTML5的移动设备上测试更现代的浏览器到Chome和Safari。这样，您的目标是为任何浏览器提供支持的最佳功能组合（它永远不会是完美的，所以请记住80/20 rule以避免将项目运行到地面。）

＆＃39; 优雅退化＆＃39; （see link）有点像倒退，它是一种更懒惰的做法。您开始使用现代浏览器构建网站，然后应用“补丁”＃39;并修复＆＃​​39;直到它在旧版浏览器上可以接受这最终创造了比从一开始就正确规划更多的工作，这种方法通常会发生的事情是开发人员/利益相关者会在某个时候放弃（即，到底是什么？为了得到这个，这太多了在IE6 / 7中工作 - 我只是去除它们的范围）

<强> 2。标准化布局的最佳方式

就我个人而言，我的建议是，如果您想在移动设备和桌面设备上使用标准布局，我建议您使用BIG字体的组合（因此它们在微型移动屏幕中可见）和小型字体（因此拥有桌面的用户）在桌面大小为900-1000px的宽度上，浏览器可以读取所有细节。

这个网站就是一个例子：

http://www.valuetrader.net

当我在桌面浏览器中打开它时，我看到了很多细节，但是当我在旅途中使用我的智能手机时，所有关键信息（即我应该购买还是出售股票？）显示在一个非常大的字体，在我的小屏幕上显得清晰。

更新2014

这部分问题现在已经有效地改为＆＃39;什么是实施布局的最佳方式？＆＃39; 。

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

响应＆＃39;的基本原则设计是在移动设备上滚动使垂直空间几乎无穷无尽，因此您只受水平空间的限制。因此，您必须确保在屏幕变小时让页面流动以填充所有可用的水平空间，并且任何导航栏或水平元素都垂直折叠，以便项目堆叠在彼此之上而不是使用空间水平。

测试网站响应能力的标准方法＆＃39;通过拖动浏览器窗口的一侧来减少可用宽度。

更好的方法是使用开发人员工具，例如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。如何进行动态图像缩放？

移动设备为您做了很多这样的事情，所以通常您只需要了解它的工作原理。基本上，当第一批移动浏览器问世时，他们必须确保已经在桌面浏览器上运行的网站也在移动设备上工作（否则没有人会使用他们的智能手机浏览网页）所以他们不得不想出来巧妙的方法来检测网站的宽度，并将其调整为可用的屏幕分辨率。

例如我的网站＆＃39; www.desalasworks.com＆＃39;被编码为900px宽度，但通过在320px的小屏幕上缩小它可以正常工作（页面上的图像使用各种方法自动resampled - 例如nearest-neighbour sampling和{{3} }，并尽可能用字体替换字体。就图像采样而言，如果您曾经在智能手机上捏过一张照片来放大＆＃39;并且＆＃39;缩小＆＃39;你知道我在说什么。

你通常不需要担心CSS让你的图像正确地重新采样，我注意到有时它们在使用百分比宽度时有点滑稽，所以坚持像素，如果这样的情况下，浏览器更容易告诉物品彼此相关。请注意，您可以专门检测移动浏览器，并将您网站的宽度设置为320px，并将其中的所有内容设置为相应内联，但实际上，这不是必须在移动设备上安装工作网站，这样做会迫使您维护2个站点，一个移动站点和一个桌面站点（一些公司很乐意这样做）。

<强> 4。百分比/固定宽度。

就个人而言，我倾向于使用以屏幕为中心的固定宽度（使用CSS边距：0px auto），我没有长时间使用百分比宽度，主要是因为标准化布局有点噩梦。如果你确实使用百分比宽度，你基本上必须做更多的测试，所以我倾向于转向它们。

请记住，这只是我的意见，一些反应性的网络＆＃39;大师们会对几乎所有事情的百分比宽度发誓，我只是因为牺牲布局的可预测性而被抛售，而我认为这是边际收益。但后来我来自构建桌面webapps的背景，如果我只专注于移动网络（水平空间非常珍贵，布局往往更简单），我可能会有不同的看法。

Answer 2

你对百分比是正确的。

作为艺术元素，习惯是（使用CSS）在图像上设置百分比宽度并将其显示设置为阻止。

还有一些技术可以根据客户端的屏幕尺寸更改图像的分辨率，例如responsive-images.js。我认为还没有一个关于如何解决这个问题的完美答案。

如果你真的对响应式设计感兴趣，我强烈推荐Ethan Macotte的Responsive Web Design。

Answer 3

目前的两个流行语是优雅降级和渐进增强，我是后者的粉丝。优雅降级意味着您隐藏和/或调整页面上的元素以便在移动屏幕上查看。渐进增强意味着您为移动浏览器编码，然后在他们使用更大的东西时添加位。后者是最好的，因为它可以防止移动浏览器不得不下载巨大的图像和一堆永远不会使用的包含，并且移动带宽非常宝贵。

我使用320andup这是为320px的移动浏览器设置网页样式的好方法，然后是平板电脑，上网本，个人电脑和可笑的大型Mac显示器的其他分辨率。所有分辨率的网页都很棒。

我从不使用百分比。我将网页设置为320px固定宽度，480px固定宽度等，因此我确切地知道它在每个设备上的外观。我使用URL中的变量在服务器上执行所有图像缩放 - 服务器缓存已调整大小的图像以供以后加载页面。这样我的闪亮的web 2.0徽标对于移动设备来说很小，但在大屏幕上却很大。这是不使用百分比的另一个原因！