1. 一个网站所有浏览器。
正如@Tak 提到的，这里的答案是“渐进增强”和“优雅降级”。然而他给出的定义并不完全正确。以下是正确的：
'渐进增强' (see link http://en.wikipedia.org/wiki/Progressive_enhancement）意味着您首先使用 HTML4 和 CSS1 等久经考验的技术为旧浏览器（带/不带 JavaScript 的 IE6/7 是一个很好的起点）编写代码，然后在更现代的浏览器上进行测试时添加增强功能支持 CSS3 和大部分 HTML5 的移动设备上的 Chome 和 Safari。通过这种方式，您的目标是为任何浏览器提供其所支持的功能的最佳组合（顺便说一句，它永远不会是完美的，因此请记住80/20 规则 http://en.wikipedia.org/wiki/Pareto_principle以避免项目进入地面）。
'优雅降级' (see link http://en.wikipedia.org/wiki/Fault-tolerant_system）有点相同，但相反，这是一种更懒惰的做法。您开始针对现代浏览器构建网站，然后应用“补丁”和“修复”，直到其在旧版浏览器上可接受。这最终会产生比从一开始就正确规划更多的工作，并且这种方法通常会发生的情况是开发人员/利益相关者会在某个时候放弃（即，到底是什么？实现这个目标的工作量太大了）在 IE6/7 中工作 - 我只是取消它们的范围）
2. 标准化布局的最佳方式
就我个人而言，我的建议是，如果您想要跨移动和桌面设备的标准布局，我建议您使用大字体（这样它们在很小的移动屏幕中可见）和小字体（这样拥有桌面浏览器的人可以阅读）的组合所有细节）在桌面尺寸 900-1000 像素宽度上。
这个网站就是一个例子：
http://www.valuetrader.net http://www.valuetrader.net
当我在桌面浏览器中打开它时，我会看到很多细节，但是当我在旅途中使用智能手机时，所有关键信息（即我应该购买还是出售股票？）都会以非常大的字体显示，在我的小屏幕上清晰可见。
2014 年更新
问题的这一部分现在实际上已更改为“实施布局的最佳方式是什么？”.
目前（以及过去几年广泛使用的 CSS3 支持）跨设备布局设计的标准方法是使用基于媒体查询 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。有许多CSS 框架 http://en.wikipedia.org/wiki/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 http://www.desalasworks.com' 被编码为 900px 宽度，但通过在 320px 小屏幕上缩小（页面上的图像会自动重新采样 http://en.wikipedia.org/wiki/Resampling_%28bitmap%29使用多种方法 - 例如最近邻采样 http://en.wikipedia.org/wiki/Nearest-neighbor_interpolation and 双三次插值 http://en.wikipedia.org/wiki/Bicubic_interpolation，并尽可能将字体替换为原生字体）。就图像采样而言，如果您曾经在智能手机上捏过照片来“放大”和“缩小”，那么您就知道我在说什么。
你通常不需要担心 CSS 来让你的图像正确地重新采样，我注意到有时使用百分比宽度时它们有点有趣，所以坚持使用像素，如果是这样的话，可以让浏览器更容易地知道项目在哪里彼此之间的关系。请注意，您可以专门检测移动浏览器并将网站的宽度设置为 320px，其中的所有内容都相应地排列，但实际上，这对于移动设备上的工作网站来说是不必要的，这样做会迫使您维护 2 个网站，一个移动网站和一个桌面网站（有些公司很乐意这样做）。
4. 百分比/固定宽度。
就我个人而言，我倾向于使用以屏幕为中心的固定宽度（使用 CSS margin: 0px auto），我已经很长一段时间没有使用百分比宽度了，主要是因为标准化布局有点噩梦。如果您确实使用百分比宽度，您基本上必须进行更多测试，因此我倾向于放弃它们。
请记住，这只是我的观点，一些“响应式网络”专家会发誓在几乎所有事情上都使用百分比宽度，我只是不同意为了我认为的边际效益而牺牲布局的可预测性的想法。但我有构建桌面网络应用程序的背景，如果我只专注于移动网络（水平空间非常宝贵，布局往往更简单），我可能会有不同的想法。
