17

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

在结构和布局方面，实施这样一个网站的最佳方式是什么？

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

另一个让我印象深刻的是动态图像缩放是如何完成的？

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

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

4

3 回答 3

24

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

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

“渐进式增强”（见链接）意味着您首先使用成熟的技术（如 HTML4 和 CSS1）为旧浏览器编写代码（IE6/7 有/无 JavaScript 是一个很好的起点），然后随着您的进展添加增强通过在支持 CSS3 和大部分 HTML5 的移动设备上的更现代的浏览器上进行测试，直至 Chome 和 Safari。这样，您的目标是为任何浏览器提供其支持的最佳功能组合（顺便说一句，它永远不会完美，因此请记住80/20 规则以避免将项目运行到地面）。

'优雅降级'（见链接）有点相同但倒退，它是一种更懒惰的方式。您开始针对现代浏览器构建您的站点，然后应用“补丁”和“修复”，直到它在旧浏览器上可以接受。这最终会产生比从一开始就正确计划更多的工作，并且这种方法通常会发生的情况是开发人员/利益相关者会在某个时候放弃（即，到底是什么？它需要做太多的工作才能做到这一点在 IE6/7 中工作——我将对其进行去范围）

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

就个人而言，我的建议是，如果你想要一个跨移动和桌面设备的标准布局，我建议你使用 BIG 字体（这样它们在很小的移动屏幕上可见）和小字体（这样拥有桌面浏览器的人可以阅读）的组合所有细节）在桌面尺寸 900-1000 像素宽度上。

这个网站是一个例子：

http://www.valuetrader.net

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

2014 年更新

这部分问题现在已经有效地变为“实现布局的最佳方式是什么？” .

目前（以及最近几年广泛使用的 CSS3 支持）跨设备布局设计的标准方法是使用基于媒体查询的所谓“响应式”布局。有许多CSS 框架可让用户开始使用适合移动设备的布局。

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

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

在此处输入图像描述

更好的方法是使用开发者工具，例如 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 ”被编码为 900 像素宽度，但通过在 320 像素的小屏幕上缩小它可以正常工作（页面上的图像使用各种方法自动重新采样- 例如最近邻采样和双三次插值，并尽可能将字体替换为原生字体）。就图像采样而言，如果您曾经在智能手机上捏过照片以“放大”和“缩小”，那么您就会知道我在说什么。

你通常不需要担心 CSS 来让你的图像正确地重新采样，我注意到有时它们在使用百分比宽度时有点有趣，所以如果是这样的话，请坚持使用像素，以便浏览器更容易分辨项目在哪里彼此的关系。请注意，您可以专门检测移动浏览器并将站点的宽度设置为 320 像素，并将其中的所有内容相应地对齐，但实际上这并不是必须在移动设备上拥有一个工作站点，这样做会迫使您维护 2 个站点，一个移动站点和一个桌面站点（一些公司乐于这样做）。

4.百分比/固定宽度。

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

请记住，这只是我的观点，一些“响应式网络”大师会发誓几乎所有内容的百分比宽度，我只是不赞成牺牲布局的可预测性以获得我认为的边际收益的想法。但后来我来自构建桌面网络应用程序的背景，如果我只专注于移动网络（水平空间非常宝贵，布局往往更简单），我可能会有不同的想法。

于 2011-12-08T10:56:50.823 回答
3

你对百分比是正确的。

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

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

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

于 2011-12-08T19:50:06.737 回答
1

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

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

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

于 2011-12-08T10:27:53.760 回答