就在今天早上，Smashing Magazine 刊登了一篇关于在移动设备上缩放时关注图像的一部分的文章：选择响应式图像解决方案（向下滚动到“艺术指导问题”部分）。通过您网站上的道路照片，您需要确保在缩小比例时显示道路而不是树木，因为道路强化了“我们正在路上”的想法。

一种颜色、简单的渐变或非常平滑的背景会比重复图案或带有细节的图案更好吗？

这取决于页面上的其他元素。如果您使用前景图像，坚持使用不与照片竞争的单一颜色背景将使眼睛自然地专注于前景图像。

如何创建与主题和设计一起使用并与之相关的重复模式？

盒子的重复图案将强化移动和存储的概念。

如果我使用可浮动的前景图像，您是否认为它必须看起来很逼真，而不是剪贴画？

剪贴画可能很棘手。有一些精心设计的矢量图像和光栅插图可以作为剪贴画，但仍然很有品位。如果您使用的是 SVG 格式，它可以在视网膜显示设备上很好地缩放。只要确保您选择的图像是好的并且与您正在创建的情绪一致。我可以想象一幅漂亮的盒子画，看起来不错，但我也可以想象质量差的剪贴画看起来很糟糕。如果您不确定，照片通常是一个安全的选择。

从设计的角度来看（我知道技术方​​面），我可以使用什么条件来决定如何放大/缩小文本，并且仍然看起来不错？IE。文本是否应根据其容器的宽度不大于某个大小？

对于您的三个水平文本块，我会调整它们的大小并填充它们，以便每行有 4-5 个单词。当您缩小到移动尺寸或非常窄的窗口时，我会将显示更改为阻止，以便每个文本块占据自己的行。

查看这些文章：

• 可读网页排版的 10 条原则
• 改善排版的五个简单步骤

哪种图像最适合宽度变化很大的背景？我的猜测是图像有一个感兴趣的锚点，在图像的其余部分有一些不重要的细节

我同意。专注于一个区域的照片，其余的背景不太突出或模糊（摄影师称这种模糊为“散景”）在这里效果很好。另请参阅我上面链接的 Smashing 杂志文章中的树照片。

关于前景图像和文本的不固定/浮动性质，需要考虑的最重要的事情是什么？（空白，包装和其他什么？）

图片是用来强化文字的。文本是最重要的因素，因此您要确保将图像放置在支持的位置。文字应该突出，但不能阻挡图像的重要部分。

接近是关键。文本应靠近图像并远离其他图像。如果您的图像 1 下方有一些文本，则您希望图像和支持文本之间的空间小于该文本和下一个图像之间的空间。例如，假设您有图像 1，其下方有文本，然后图像 2 在其下方，图像 2 下方有更多文本。您希望在图像 1 的标题和图像 2 的顶部之间留出比您更多的空白空间d 在图像 1 及其标题之间。

关于这个主题的一本好书是非设计师的设计书

另请查看 Apple Developer's Guide on Interaction Princples：Human Interface Principles。这里有很多好东西。

这些选项看起来很简单。

• 使用多个图像尺寸，每个都通过媒体查询调用，以匹配 4 种基本屏幕尺寸。
• 使用该background-size:属性动态更改任何背景图像
• overflow: hidden;当页面宽度减小时，使用该属性可以在 div 中隐藏较大的图像。这需要您记住在不同页面宽度下可见的内容。

你问的问题有点模棱两可……但是……

一种颜色、简单的渐变或非常平滑的背景会比重复图案或带有细节的图案更好吗？

高度依赖模式。如果它是一个微妙的图案，在视觉上不会与上面的文字竞争，那么一个图案可能会起作用。不过，我会倾向于纯色或微妙的渐变。简单的颜色将使文本更具可读性。

如何创建与主题和设计一起使用并与之相关的重复模式？

那是你的电话。你是在要求别人为你设计东西吗？

如果我使用可浮动的前景图像，您是否认为它必须看起来很逼真，而不是剪贴画？

同样，这是您和客户之间的事情。网站要传达的“情绪”或“信息”将决定要使用的图像风格。

从设计的角度来看（我知道技术方​​面），我可以使用什么条件来决定如何放大/缩小文本，并且仍然看起来不错？IE。文本是否应根据其容器的宽度不大于某个大小？

一致性最适合设计。一致性给人一种稳定的印象。如果第一个文本块是单行文本，我会尝试为所有后续文本块坚持单行文本。宽度可以改变一点，但是从单行文本移动到多行文本将需要移动元素。当元素移动时，您会失去一致性感。

使用 CSS3 媒体查询，我们可以使图像具有响应性。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

如果您需要更多解释，请查看此链接，http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries